{"componentChunkName":"component---src-templates-blog-pagination-js","path":"/blog/2","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"allMdx":{"edges":[{"node":{"excerpt":"想让你了解的是一个拖拽生成的低代码平台，虽然是低配的，但是实现起来还挺有意思。 一、背景和需求 H5 本来是 HTML5 的缩写，与 CSS3 和 ES5 代表着当时多年迟滞的高级浏览器特性更新，随着移动互联网的发展，逐渐的含义在运营层面变成了互动网页，更是基本上特指手机端的互动营销页面。H5 的形式在当时是一个非常热门的营销方式，毕竟快速接入，获客方便。 目前的 H5 逐步发展成熟，包括 Hybrid H5 的普遍应用，还有组件库、SPA 等等概念的兴起，说起来各大公司的实际业务更多是在做 H5，在追求急速敏捷的开发阶段，搭建式的 H5 平台也异常丰富。 广义上的 h…","id":"35a34818-564f-5a98-8f95-6581d65262c7","fields":{"title":"🪂 又一个 H5 拖放平台","description":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。","slug":"/blog/h5kit","date":"2024-06-01"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 又一个 H5 拖放平台","date":"2024-06-01 18:13:35","banner":null,"slug":"h5kit","categories":["thinking"],"tags":["writing"]}}},{"node":{"excerpt":"主要是想分享一个可用服务的简单实现，很多的大项目看起来很复杂，想要搭起来也非常不切实际，但是 80% 的稳定性实现 80% 的功能也并不是不能尝试。 个人的小项目中很多地方都会用到各种库，NPM 的库更是亲切，以前爪机时代有很多免费的 CDN 可以白嫖，大厂小厂都觉得公共 CDN 的托管还能帮助提高用户体验，强缓存的策略应该成本可控。但是现在越来越多的托管方删库跑路，再加上云服务的 CDN 的很好体验，慢慢的都不做公共 CDN 的托管了。 但是现在云服务上面的 CDN…","id":"32a4be1f-afd7-5cf1-aaaf-ccb6e8b3e2aa","fields":{"title":"🪂 手动搭建一个 jsDeliver","description":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。","slug":"/blog/setup-cdn-for-npm-and-gh","date":"2023-10-17"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 手动搭建一个 jsDeliver","date":"2023-10-17 14:17:56","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"setup-cdn-for-npm-and-gh","categories":["code"],"tags":["writing","CDN","npm"]}}},{"node":{"excerpt":"⚡想分享的是 webpack 中使用依赖预编译的手段优化编译环节，优化开发环境下的体验。从用缓存降低二次编译时间，到第三方依赖的预编译方案的需求和实践讨论，到具体的实际落地。 ps: 无论是 webpack4 的内存缓存、  hard-source-webpack-plugin  还是 webpack5 内置完善的 cache 方案，都能够在开发环境下将二次编译压缩到我们能够接受的时间，这篇文章的目的更多是在持久化缓存的基础上，探索更少的编译时间。 static_sites 项目是作为很多小项目的集合，目的是因为以前每个项目都开个仓库，Node…","id":"002e6cce-b11e-504d-9bcb-85a3af87ca5c","fields":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","description":"大型复杂项目的编译优化，提升开发体验，编译时长从 120s 到 10s，我发现了什么。","slug":"/blog/prebundle","date":"2022-05-25"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⚡ 优化 webpack 开发体验以及依赖预编译方案","date":"2022-05-25 11:09:40","banner":null,"slug":"prebundle","categories":["code"],"tags":["整理","功能","Webpack","prebundle"]}}},{"node":{"excerpt":"这篇文章分享的是更详细一步步的实现 VSCode 的 textmate，并且解释一些为什么，最后手动引入新的高亮逻辑。 PS: 上一篇相关文章： 🌋 WebIDE 的开发记录其五（monaco-editor + textmate） WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，更详细深入谈谈 Textmate…","id":"8816fcee-6764-51e5-a1c0-40f9e0fd5a32","fields":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","description":"WorkPad 是一个非常有意思的项目，之前抱着分享思路的想法，用很简略的文章说了下重点，之后非常多的人来信询问 Textmate、LSP 等问题，后面用几篇文章再多说一些。本文为第八篇文章，谈谈 Textmate 的高亮和扩展。","slug":"/blog/workpad-part-8","date":"2022-01-05"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其八（Textmate详解）","date":"2022-01-05 14:18:21","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-8","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","Textmate"]}}},{"node":{"excerpt":"想分享的是一个已经有初步思路的问题，怎么再进一步实现我们的目标形态。 先看结果：（DEMO 预览可以到  机器人眼睛动画的演示 ） 〇、上回书说到 上一篇文章写了实现静态的图像了，不过官方的开源中还包含了一个动画的资源，多达一千多个动画，这篇文章写写怎么实现这个动画。 一、动画文件的参数 先看一个动画的控制数据： 大概能分析有多种类型的控制，以 ms 为单位排布，能控制多种类型： 我们这里关心的就是表情控制和程序表情关键帧，在程序里面被称为：动画片段 (animClip)\n和序列帧动画 (spriteSequence…","id":"e39d5e0b-deda-5587-933d-d45603d8ebfe","fields":{"title":"🤖 机器人眼睛动画的实现 2","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","slug":"/blog/k-vrc-vector-cozmo-2","date":"2021-09-04"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤖 机器人眼睛动画的实现 2","date":"2021-09-04 16:34:10","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='202'%3e%3cpath%20d='M8%2022v51l1%2050h384V21H201L8%2022'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/be9cc/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/77247/banner.png 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/375c0/banner.png 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/be9cc/banner.png 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/8c853/banner.png 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/43380/banner.png 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/0c37a/banner.png 2368w","srcWebp":"/static/c289618fe7e452b4133a03b30b5de03a/f1dd6/banner.webp","srcSetWebp":"/static/c289618fe7e452b4133a03b30b5de03a/5e0c5/banner.webp 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/c5804/banner.webp 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/f1dd6/banner.webp 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/00479/banner.webp 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/aa813/banner.webp 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/b51c9/banner.webp 2368w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"k-vrc-vector-cozmo-2","categories":["code"],"tags":["整理","思考"]}}},{"node":{"excerpt":"想分享的是从脑袋里有一个想法，到调研、遇到瓶颈、找到突破、走弯路、实现还算可以的效果，最后完善到完美。就像大部分的工作一样，每一步都好像都不太顺利，但是最后还是能够把问题解决。 先看结果：（DEMO 预览可以到  机器人眼睛动画的演示 ） 〇、脑袋里甩不掉的想法 💡 周末补了爱死机，一发不可收拾，第一季第二集的三个机器人让我觉得特别有趣，尤其是其中一个表情丰富，于是特别想深入了解。到爱死机的  Wiki  上，知道那个机器是叫  k-vrc 。 又想到之前了解到的一个小机器人： vector/cozmo ，很好玩，但是价格、本地化不太友好： 又又想到了蔚来汽车的 Nomi…","id":"b7cc2c7b-b49d-5445-9986-bd800c4695c1","fields":{"title":"🤖 机器人眼睛动画的实现","description":"从爱死机的 k-vrc 到 Vector/Cozmo 的眼睛，机器人眼睛的趣味性让我无法自拔，于是实现了这个有意思的眼睛绘制，顺便总结下一个项目的开发过程。","slug":"/blog/k-vrc-vector-cozmo","date":"2021-09-03"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤖 机器人眼睛动画的实现","date":"2021-09-03 16:34:10","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='202'%3e%3cpath%20d='M8%2022v51l1%2050h384V21H201L8%2022'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.976627712854758,"src":"/static/c289618fe7e452b4133a03b30b5de03a/be9cc/banner.png","srcSet":"/static/c289618fe7e452b4133a03b30b5de03a/77247/banner.png 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/375c0/banner.png 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/be9cc/banner.png 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/8c853/banner.png 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/43380/banner.png 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/0c37a/banner.png 2368w","srcWebp":"/static/c289618fe7e452b4133a03b30b5de03a/f1dd6/banner.webp","srcSetWebp":"/static/c289618fe7e452b4133a03b30b5de03a/5e0c5/banner.webp 180w,\n/static/c289618fe7e452b4133a03b30b5de03a/c5804/banner.webp 360w,\n/static/c289618fe7e452b4133a03b30b5de03a/f1dd6/banner.webp 720w,\n/static/c289618fe7e452b4133a03b30b5de03a/00479/banner.webp 1080w,\n/static/c289618fe7e452b4133a03b30b5de03a/aa813/banner.webp 1440w,\n/static/c289618fe7e452b4133a03b30b5de03a/b51c9/banner.webp 2368w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"k-vrc-vector-cozmo","categories":["code"],"tags":["整理","思考"]}}},{"node":{"excerpt":"想分享的是对于网络层可用性的一些常见端侧优化案~~ 明天和意外哪个先来临？ 没有人能说自己手中的项目能够万无一失，没人能保证千万分之一的错误率，不能被你遇到，程序崩溃，服务瘫痪的例子已经不算是新闻了，一个大型项目的上线，怎么才能保证健壮和稳定呢？ 从源头考虑，比较基础的有代码规范、强类型限制、MergeRequest、代码静态检查等等，能够避免一开始的编码问题，这里不多说，因为你足够小心就不会让意外出现在用户手中。 哪怕再小心，很多意外也是没办法解决，涉及到很重要的体验问题，还是需要你准备一套 PLAN B…","id":"e7faa624-9431-587e-b5b2-ada6090e59f2","fields":{"title":"🪂 兜底和容灾","description":"周末你和爱人吃着饭，突然一个电话过来，平台突然无法访问，数万活跃用户受到影响，你匆忙赶到公司，发现除了发版无法解决，最后紧急提交但是还是等到下周一才彻底解决，复盘发现大量用户流失。最后结论是：意外总是突如其来，你准备的越充分越能抗住","slug":"/blog/fallback","date":"2021-06-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🪂 兜底和容灾","date":"2021-06-18 18:13:35","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%3e%3cpath%20d='M0%2080v80h38c37%200%2037%200%2034-2-5-2-8-7-6-11%202-3%201-3-8-2l-10-1-3-5-2-2v4l2%207c0%203%200%204-15%205H20l-2-3v-34l2-32c1-1%2021-3%2023-2l1%2027c-1%2027%200%2020%202-14%200-21-1-20%2015-20h10l-1%2031%201%2032%207-12%206-11-2-3c-3-3-5-8-4-10l5-5%205-5c0-4-19-22-24-22a658%20658%200%2001-47%203c-5-2-6-7-3-16%203-11%200-10%2024-10%2019%201%2020%201%2021-1l17-15c1-1%200-4-3-10s-4-11-4-14c0-4%200-4%204-6%203-1-3-1-35-1H0v80M164%201l4%203c1%201%202%2010%201%2013-1%202%200%203%203%205%205%204%205%204%205%200%200-2%202-3%2021-12l20-10h-29c-23%200-28%200-25%201m77%202c4%204%203%205-8%2010-33%2015-44%2021-45%2022-2%202-2%202-4-1-3-3-5-3-4%201%201%203%200%205-8%2010l-9%207-2%202-1-2-1-5-3-5c-3-5-2-5-11%208l-7%209%203%202c7%205%208%207%209%2011%200%206%200%206-10%2014-9%206-9%205-7%2020v7l3-3c2-1%205-5%207-10l6-12%201%201c3-1%203%200%201%205l-2%207v2l2-1%205-10%204-11%201-2%202-3%201-1%202%201%201%209-2%2011v3l2-3%201-5c0-2%201-3%202-3v-1c-1%200-1-1%201-3l1-2%202%202%202%204h-3l1%202-12%2035-1%207-2%205-2%205c0%206%200%207-3%207-4%201-9%205-8%207h-1l-2%202c-1%203%201%203%204-1s3-4%209%200%208%204%2011-1l7-9%208-8c3-4%203-4%2010%201s9%208%206%2011l-1%202%2011-6-6-7-6-6%2010-10c8-9%2014-14%2014-12l1-1c2-1%204%201%204%205a10021%2010021%200%200118-50c-3%205-2%205-14%201l-9-5%2026-46c1-1%2010%201%2015%204l5%202%201%201%2023%2015%2024%2015c1%202-1%208-5%2011-4%205-4%206%200%208l34%2022-4%206-5%205%2023%2023%2022%2024-3%204-4%203%2014%201h14V0H239l2%203m1%2031c-2%203-1%205%203%208l3%203-1%202-2%204%203-3c1-3%205-4%205-2l-2%206c-4%206-4%206-1%206%202%200%203-1%205-4%202-6%202-6%209-1l10%206%203%204h1c1-2%201-2%204%200l14%207%201%201c1%202%202%201%201-2%200-1-2-3-5-4l-4-2-2-1-2-1c0-1-1-2-3-2l-4-4c-2-4-7-6-10-5-2%200-2%200-1-1v-2l-2%201h-1v-1l-2-3c-4-2-5-3-4-1s-3%201-6-1l-5-5-2-3c-2-2-3-2-3%200m-52%2021l-21%2016%201%201%206%201c6%201%207%204%204%2012a167%20167%200%2000-3%2010c-3%204-14%2037-13%2037l1%201c0%203%208%2010%2010%2010%201%200%202-1%201-2l3-4%203-3%205-4%206-5%201-1%202-3%203-1a1349%201349%200%200033-28l-2-7c-3-6-10-12-14-12l-9%2010c-2%201-2%201-7-2s-5-4-3-5c1-2%201-2-2-5l-3-2%203-3%2014-9%201-2c2-2%201-4-5-7l-4-2-11%209m-78%2032l-4%205-1%202c-2%200%200%201%201%202l1%201%201%201v1c-1%202%201%204%204%204%202%200%204%202%204%206%200%206%201%2012%203%2012l1-4-2-15c-1-19-1-20-8-15m178%2029c-6%207-25%2036-24%2037s3%200%207-4l17-16%2012-10-4-3c-6-6-7-6-8-4M98%20139l-7%2013c-4%208-5%208%2018%208h20v-4l-2-4%203-5%204-2-2-3-3-4c0-2%200-2-2%200l-1%205c1%205%201%205-8%201-6-4-8-5-13-11l-2-3-5%209m225%200l-2%204-10%209-7%208h21l21-1-11-12c-10-10-11-11-12-8'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.5,"src":"/static/05e4752797239ca0e0416a47b0311c22/30bd0/banner.jpg","srcSet":"/static/05e4752797239ca0e0416a47b0311c22/1cd47/banner.jpg 180w,\n/static/05e4752797239ca0e0416a47b0311c22/0aeec/banner.jpg 360w,\n/static/05e4752797239ca0e0416a47b0311c22/30bd0/banner.jpg 720w,\n/static/05e4752797239ca0e0416a47b0311c22/2e512/banner.jpg 1080w","srcWebp":"/static/05e4752797239ca0e0416a47b0311c22/f1dd6/banner.webp","srcSetWebp":"/static/05e4752797239ca0e0416a47b0311c22/5e0c5/banner.webp 180w,\n/static/05e4752797239ca0e0416a47b0311c22/c5804/banner.webp 360w,\n/static/05e4752797239ca0e0416a47b0311c22/f1dd6/banner.webp 720w,\n/static/05e4752797239ca0e0416a47b0311c22/00479/banner.webp 1080w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"fallback","categories":["code"],"tags":["兜底和容灾"]}}},{"node":{"excerpt":"…","id":"db2ff414-2b81-5500-9dd8-fe0b104507e7","fields":{"title":"🏡 因为租房子我一口气写了两个项目","description":"房租还有半个月到期，想着去找找房子吧，但是去哪找？搬去哪的问题是个大问题，北京城很大，房子很多，只要妥协总能找到，可惜我不想妥协。","slug":"/blog/range","date":"2021-06-08"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🏡 因为租房子我一口气写了两个项目","date":"2021-06-08 18:13:35","banner":null,"slug":"range","categories":["code"],"tags":["生活"]}}},{"node":{"excerpt":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。 上篇（ 🌏 把 MIUI 12 的超级壁纸搬到 Web 上 ）说了很多的东西，这里不再赘述，只是一些不一样的地方。 一、结果放到前面 预览可戳(17MB 左右，爪机慎点，源码在最后)：   超级雪山 二、资源获取 资源的获取和之前一样，都没有变，因为是 24h 壁纸，所以包含了 9 中不同光照条件下的资源贴图，这里以序号为 7 的贴图为例。 素材列表  center.001.obj   地形，包含了两个 mesh…","id":"1c4a32ef-78bc-5082-a9cc-82fcc87ecac6","fields":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","description":"万万没想到这篇文章居然还能写个二。MIUI 12.5 发布的时候增加了一个四姑娘山的超级壁纸，看腻了之前的超级火星，这次这个比较清新，过了很久还是忍不住又鼓捣着玩起来了。","slug":"/blog/move-miui-12-super-wallpaper-to-web-2","date":"2021-01-13"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🗻 把 MIUI 12 的超级雪山搬到 Web 上（二）","date":"2021-01-13 15:55:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='128'%3e%3cpath%20d='M0%2064v64h401V0H0v64m124-45c-5%201-11%203-10%204l-1%201h-2l-4%203c-4%203-6%205-4%207%201%201%202%203%201%204%200%202%201%204%205%208l6%209c1%204%206%207%207%205%201-1%207%202%207%203l1%201c2-2%201-4-1-4l1-1c2-1%203-1%205%201s2%202%203%201c0-2%202-1%202%201v2l3%201%201-1%201-3c1-2%201-1%201%204%200%202%206%201%209-1l2-3v-1l1-1v-2h1l1%202%201%202c0%205%202%204%202-1%200-3%200-3%201-2%200%203%202%203%202%200l1-5%202-2v2l1%203v-4c-2-14-12-26-26-31-4-2-16-3-20-2m233%201l2%201c2%201%202%201-1%201l-2%202v1h-1l-1-1v7h1l2%201c0%202%202%202%206%202l6%201-2%201-4%201-4%201-4-2-3-1v6l-3-3c-1%200-2-4-1-6l-2-1h-2l-2-2c-1-1-2-2-1-3h1c1%201%205%200%205-1l-5-4c-6%200-7%200-7%203l2%203h2l-2%201c-2%200-2%200-2%2013l1%2012%203%202c2%201%202%201%203-1%200-1%201-2%202-1%201%200%205-3%205-5l-1-2-2-1c0-1%203%200%205%202%201%201%200%202-1%205l-1%204-2%202c-5%202-5%205%201%2010l3%204c0%202%203%205%206%205l1%202c0%203%203%205%205%204h3c1%202%201%202-1%202s-3%202-1%204l3%205%202%204c3%200%207-2%209-4l3-1c1%200%201%201-2%205s-4%205-4%209%200%205-2%206%202%202%209%202h7V81l-1-48V19h-15l-16%201m-54%207l-9%204c-2%202-5%203-6%202l-3%201%202%201c1%200%200%202-3%205-11%2012-16%2031-11%2038%205%205%209%205%208-1%200-3%201-4%204-2h3c3-3%206-8%206-10%201-3%203-3%203%200h3l-1-1v-2c0-1%200-2-2-2l-2-1%202-1c2%200%203-2%204-5%202-4%203-6%205-6%201%201%203-1%203-2l-1-1c-2%201-5-3-4-4l2%201h1l4-2%202-1%203-1h1l-3-3c-6-3-6-5%200-3h6c1%201%201%200%201-1%200-3-1-4-8-4-3-1-6%200-10%201m-80%2021l-5%201-1%201-2%201-2%201-2%205c-2%204-3%2011-1%2011l2%201c1%201%202%202%205%202h6c3%201%2010-1%2013-4%204-3%206-12%203-15-4-3-11-5-16-4M13%2082c-1%202%200%206%201%206v1c-4%203-2%205%205%205l6-1-2-1v-1c1-2%201-2-3-2l-3-1h3c4%200%204%200%204-3v-3c1-1%200-1-3-1l-5-1-3%202m18-1l-2%201c-2%200-2%200-1%201v2l1%202v2c-3%203-1%203%202%200l2-1-3%203-2%203%202-1h10V81c-1-1-1%201-1%205%200%206%200%206-2%206s-2-1-2-4l-2-4c-1-1-1-1%201-1s2%201%202%204l1%204%201-5c0-4%200-4-2-4l-4-1h-1m76%200l-1%207c0%206%200%206%203%206s3-1%203-4c0-4%200-4%202-2l3%201-1-2c-3-2-2-3%200-3s2%201%202%204c0%202%200%203-2%204-3%200-3%202%200%202%204-1%204-12%201-12-1%200-2%200-1-1l-1-1-2%202v2l-2-2c-2-2-2-2-4-1m16%201v1l1%201-1%201c-1%200-2%202-2%205l1%204%201-1h12l-4-1c-5%200-6-1-4-2h1l3%201h4v-5c0-5-1-5-3-5l-3%201-2%203-1-1%201-1v-1c-2-2-2-2-4%200m15%200c-2%205-1%207%202%207h3l-3%201c-3%202-3%202-1%202l2%201h8l2%201-1-2c-1-1-2-2-1-3v-5c0-3-1-3-3-3-3%200-4%200-3%204%200%203%200%204-1%203-2%200-2-1-1-3v-4c1-2-2-1-3%201m20-1c-5%200-5%200-5%203s0%204%203%205c2%201%202%201%200%201s-2%200%201%201l3%201h-4c-6%200-3%202%204%202%206%200%209-2%203-2-3%200-3%200-1-1%202%200%203-1%203-2v-1l1-3c0-4-1-5-8-4m11%202v4c-2%202-1%203%202%203h2l-2%201-3%201h2l3%201h6c1%202%203%200%203-2h-2c-1-3-1-4%201-4v-1h-1l-1-2%202-2c1-1%200-1-3-1l-6%202v-1c0-3-1-3-3%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.1218905472636815,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/30bd0/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/1cd47/banner.jpg 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/0aeec/banner.jpg 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/30bd0/banner.jpg 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/2e512/banner.jpg 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/28df3/banner.jpg 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/24b7e/banner.jpg 2510w","srcWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/f1dd6/banner.webp","srcSetWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/5e0c5/banner.webp 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/c5804/banner.webp 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/f1dd6/banner.webp 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/00479/banner.webp 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/aa813/banner.webp 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/6940d/banner.webp 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"move-miui-12-super-wallpaper-to-web-2","categories":["code"],"tags":["Three.js","3D","Mars"]}}},{"node":{"excerpt":"之前说过数据层相关的内容： 📦 实现一个简单朴素的 react 数据管理层 NOVUS 📊 React 实践技巧和性能优化 ⚓ React Hooks 理解 🤔 技术背后隐含的思维方式 这些文章涉及了很多数据层、性能、副作用相关的内容。今天我想换个角度，从无关框架和语言的角度，深入探讨数据驱动模式开发的核心逻辑——不是讨论某个具体的库，而是思考状态应该如何设计、数据如何流转、视图如何响应。 一、前言 如果经常做大前端业务，尤其是数据驱动模式 + 声明描述式的 UI 开发比如 React、Vue、Flutter、SwiftUI…","id":"024f3d04-8fe3-5f84-9d1c-7bcc6d66120f","fields":{"title":"🔂 数据驱动模式下状态和视图层逻辑","description":"“你需要精心设计好数据模型和组件状态才能得到一个运转良好的视图表现。” 无论是什么框架或者语言，这种架构优秀的应用都是减少状态变更牵扯的计算和渲染。","slug":"/blog/model-and-view-logic-under-state-driven-mode","date":"2020-12-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔂 数据驱动模式下状态和视图层逻辑","date":"2020-12-18 01:17:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"model-and-view-logic-under-state-driven-mode","categories":["code"],"tags":["前端","整理"]}}},{"node":{"excerpt":"PS: 跨域警告是浏览器安全的很重要机制，代理和转发服务对于服务提供者是异常访问行为，如果对目的服务器故意隐藏来源也是一种非法行为。所以虽然没有法律明确，但是需要遵循不能大规模流量劫持，不能从事非法活动，必须添加  Origin  或者  X-Requested-With  来声明来源等绅士条款。本文部署的服务也遵循了这个限制。 为什么 很多时候的小的个人项目需要一些数据，比如自己的魔镜项目添加天气信息、个人工作流收集外链和标题功能、墨水屏时钟添加穿衣指数等信息。因为是开发或者个人需求，所以只需要很少的请求公开的服务数据，比如天气网、解析 HTML…","id":"fa524fed-fde8-51f6-85ee-2afb7fcab057","fields":{"title":"🌈 跨域任意门","description":"很多时候的小的个人项目需要一些数据，开发阶段只需要很少的请求别人的数据，也不值当收集或者搭建服务，就想着直接从客户端请求，但是大部分的服务都有跨域问题，常见的解决方案是服务器代理一下，今天把这种方案整理一下，做的全面一些方便使用。","slug":"/blog/cors-anywhere","date":"2020-12-17"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌈 跨域任意门","date":"2020-12-17 00:17:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2045a227%20227%200%20001%2046c-1%201%203%201%2013%201%2012%200%2014%200%2014-2%201-2%200-3-8-3-7%200-8%200-7-2%201-1%201-1-1-2-1-2-1-2%205-2l20%201c2%202%207%201%207-1%201-1%201-1%201%201s0%202%202%202l10-2%207-1h2l2-1c0-3-1-3-3-1-1%201-2%201-2-3l-2-5c-2-2-1-7%201-7v-2l1-1-1-1-2-2c0-2%202-3%202%200%201%203%208-6%208-9%200-7%202-8%2011-5l5%201c1%200%208%204%2010%207l4%202-1%202c-2%202-2%202-1%204%204%202%208%201%205-2v-2h1l1-1c1-2%201-2-1-4-1-1-1-1%202-1l2%202c0%203%2010-1%2013-5l2-1%202-2c1-4%203-5%203-1l1%203%202-3%201-2a221%20221%200%20011%206h8l3-1%208-3c1%201%204-2%204-4l-2-1-1-1c-1-1-1-1-3%201h-3c-1-2-6-3-7-2-2%201-4%201-4-2%200-2-3-6-5-6s-1-2%202-5c4-3%203-6%200-4-3%200-3-1%202-10l4-9H0v45M298%202c0%202%202%207%204%209l2%203-2-1c-3-4-4-4-3-1l-1%202-1-1c0-1-1-2-2-1l-4-1c-2-2-6-1-6%202l-2%201-2-1c0-2-8%204-11%208-4%205-5%209-2%2013l1%205c-1%201%200%202%201%203h2c0-1%205%201%207%203%202%201%203%200%205-7%200-3%204-6%205-6v3l1%201c-3%200%202%203%205%203h4l-4%201c-6%200-7%205-1%207l3%202%203%201%205%201h3c0-1%203-1%204%201l2%201%201%201c0%203%203%204%206%203%205-2%207-2%207%200h1l4-1h4l-3%201-5%202h-1l-1-1-1%202%201%201%201%202-2%202c-2%200-3-1-3-2l-4-3c-2%200%200%204%203%207s4%203%207%203l2%201%201%201c2%200%201-4-1-5-4-1-4-2-1-2%204%200%207%208%204%209l-2%202%202%201h2c0%201%2010%204%2015%204%204%200%205%200%204-1%200-2%202-3%203-1l2%201%203%201h3l1%201%201-1c0-3%202-4%204-3%203%202%203%203-1%203s4%202%2010%202l5%201c0%201-13%202-21%201l-3%201%208%201h6l-2%201-6%202-4%202h9c8%200%209%200%209-2l2-3c2-1%202-1%202%202l-1%203h15V0h-51c-50%200-51%200-51%202M19%2045c-2%202-3%202-3%201%200-2-2-3-4-1-1%203-1%206%201%206l3-1h5c4%200%208%203%209%206%201%202%201%202%202%201h1c-1%202%201%204%203%204v2h9l3-1c3%200%205-2%202-3l-3-2c-2%200-2-1%201-3%204-3%205-6%201-4h-6c0%202-2%201-3-1l-1-1v1l-3%201-3-1h-1c-1%200-2-1-1-2%200-2%200-3-3-4-5-2-6-1-9%202'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"cors-anywhere","categories":["code"],"tags":["前端","整理"]}}},{"node":{"excerpt":"想让读者了解的事情 在阅读这篇关于 Chrome 技术实现的文章前，希望你能理解： 标准化的力量  - 原生 Web 标准往往是最优的解决方案 组件化的本质  - Web Components 提供了真正的封装和复用能力 未来技术的前瞻性  - 理解新技术趋势对技术选型的重要性 工程化的平衡  - 性能、开发体验、可维护性之间的权衡 学习的方法论  - 从优秀项目中汲取经验，举一反三 PS: 在你的 Chrome 浏览器里面输入  chrome://welcome/ ，我们从这里开始 一、观其行 能看到： 用了 ES Module 用了 Web Component 用了暗黑的 CSS…","id":"80f622c2-3eb0-505b-9993-46d05150698a","fields":{"title":"🍻 跟着 Chrome 学技术","description":"Chrome 是一个很优秀的浏览器，好奇查看了一些页面的源代码，发现很多我们值得学习的技术和能力，面向大佬编程，奥利给！","slug":"/blog/learn-from-chrome","date":"2020-11-17"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🍻 跟着 Chrome 学技术","date":"2020-11-17 22:50:20","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='180'%3e%3cpath%20d='M0%2037v36l5-3c9-5%2017-3%2023%205%203%204%202%2012-1%2017-2%203-19%2013-24%2014H0v74h363l-3-2c-12-8-8-28%206-30%203%200%204-1%205-3l11-35c10-34%2010-36%2015-37l4-1V0H281l-2%204c-7%2010-18%2015-32%2015-11%201-19-3-26-9-3-4-3-4-2-7l2-3H0v37m53-21c-4%202-5%208-1%2012l9%201%202-3%201-1v-7l-4-1c-3-2-3-2-7-1m96%2054l-3%201c-3%200-2%202%201%202h4l-3%201h-3l2%201%203%201h-3c-4%200-5%202-1%202h2l-2%202c-2%203-3%205-1%205%201-1%202%200%202%202s1%202%208%202l7%201V79h-5l-5-1h6l6-1-1-1-1-1-3-1-4-1h4c5%200%207-2%203-2l-3-1h-10m104%200v2l-1%201c-1%200-2%201-2%203s2%203%203%201%2013-3%2013-1l-6%201-6%201%203%201c5%200%202%202-3%202-6%201-7%203%200%203l4%201-2%202-1%201%203%201c3%200%204-1%204-3s1-2%204-2l4-1%202-1%201%202-1%202-1%202c0%203%204%201%205-3%200-4%203-8%203-4l1%203c1%201%201%201-1%201-3%202-3%204%201%204l8-1c3%201%204-2%201-3-2%200-2%200-1-3%203-3%202-5%200-5-3%200-3-2%200-2%203-1%204-3%201-3l-3-1-2-2-2%202-1%201-3%201c-2%200-2%200-2-2%200-3-2-2-4%201v4c3%201-1%206-5%205-3%200-3%200-2-2l3-1%201-2-1-3v-1c0-3-3-3-4-1s-1%202-3%200-4-2-3%201c0%202-1%201-3-1-1-2-2-2-2-1m47%202c0%202%200%202-4%202-3%200-4%200-4%202l3%201c4%200%204%201%200%205-3%202-3%203-2%204s2%201%204-2l3-3v4c0%203%200%204%202%204l1-4v-4l3%203c3%202%204%203%205%202s0-2-2-4c-5-4-5-5-1-5l3-1-1-2-2-2c-1-4-3-4-3-1v3l-2-3c0-3-3-3-3%201M94%2071l-1%203v8l1%202c0%202%201%203%205%203%209%202%2010%202%2012-1%202-4%203-9%201-9l-1-1c1-2-2-5-6-5l-6-1-5%201m29%203c0%202%200%203%202%203l1%204c0%204%200%204-1%201%200-5-2-4-2%202v5h6l8-1h2c3%202%205%200%203-2-2-1-2-2-1-2l1-7v-7h-11v8l-1%207V70h-3c-4%200-4%200-4%204m49-1c-3%204-2%2011%201%2013%202%202%207%201%208-1%203-2%202-3%200-3l-2%201-2%201c-2%200-3-1-3-5%200-5%202-7%205-4%201%202%204%203%204%201s-4-5-6-5l-5%202m12%206c0%207%200%208%202%208%201%200%202-2%202-5%200-6%203-6%203%201%200%203%200%204%202%204l1-5c0-5-2-8-4-7s-2%200-2-2l-2-2c-2%200-2%201-2%208m12%202c0%205%200%206%202%206l2-4c0-5%203-6%203-2%200%205%206%208%209%204%203-2%202-6%200-8s-4-3-7%200h-2c0-1-1-2-3-2h-4v6m20-5l-1%206c0%204%200%205%202%205%201%200%202-2%202-5%200-5%202-5%203%201%200%203%201%204%202%204l1-4c1-6%203-6%203-1%200%204%200%205%202%205%202-1%203-7%201-10-1-1-14-2-15-1m-57%2030l-1%208v7h84v-15l-42-1-41%201M57%20154l-9%206c0%202%2017%2012%2019%2012l1-11-1-12-10%205m328%2014c-1%203-6%2010-9%2011-2%201%203%201%2011%201h13v-12l-7-2c-8-3-8-3-8%202'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2248628884826327,"src":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/be9cc/banner.png","srcSet":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/77247/banner.png 180w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/375c0/banner.png 360w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/be9cc/banner.png 720w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/8c853/banner.png 1080w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/beb46/banner.png 1217w","srcWebp":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/f1dd6/banner.webp","srcSetWebp":"/static/9d6ab02ba3cd6914d7fd6eac628d0697/5e0c5/banner.webp 180w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/c5804/banner.webp 360w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/f1dd6/banner.webp 720w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/00479/banner.webp 1080w,\n/static/9d6ab02ba3cd6914d7fd6eac628d0697/9651a/banner.webp 1217w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"learn-from-chrome","categories":["code"],"tags":["整理","思考","功能"]}}},{"node":{"excerpt":"PS: 建议配合上篇文章食用  📦 实现一个简单朴素的 react 数据管理层 NOVUS PS 2 : 有意思的点： Novus 版本的 Fiber，喘息机制 ， 自动收集订阅依赖问题 ， 完善的测试 PS 3 : 前端项目中的数据层被造轮子无数，有很多优秀的库，大厂更不用说内部成熟的解决方案。这只是我在项目中实践的一个解决方案，仅供参考。 一、考虑不周和隐患 当时的出发点主要是想搭上 TS 的语法提示，让可推断的流畅性帮助我们更好的编码，然后完成和主要业务的配合，不过很好的完成了项目的数据支撑。 回过头看其中也遇到了很多问题和隐患： 每次 setState…","id":"4b47ec34-72a4-53b3-bcc7-635b1d884359","fields":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","description":"上次造的轮子在好几个项目中落地，因为造的有点仓促，只顾了几个痛点，很多没有考虑周到的地方在实践的时候暴露出来，这里记录下中间改进的地方。","slug":"/blog/novus-2","date":"2020-10-17"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 改进一个简单朴素的 react 数据管理层 NOVUS","date":"2020-10-17 22:50:20","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='142'%3e%3cpath%20d='M0%2071v71h401V0H0v71m302-50h-12c-9%200-11%200-11%202%200%201%208%202%2010%200h1l12%201%2014%201c2%200%202%200%202-2s-1-2-8-2h-8M7%2067l32%201%2031-1-31-1-32%201m0%2025'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/be9cc/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/77247/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/375c0/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/be9cc/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/8c853/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/1bbb9/banner.png 1369w","srcWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/f1dd6/banner.webp","srcSetWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/5e0c5/banner.webp 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/c5804/banner.webp 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/f1dd6/banner.webp 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/00479/banner.webp 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/5e581/banner.webp 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"novus-2","categories":["code"],"tags":["整理","思考","功能","NOVUS","状态管理"]}}},{"node":{"excerpt":"ubug.io 这个域名是在几年前申请的，一直续费用着，主要的一个原因是很简洁，所以有时候会想用这个域名做一个短链接服务。 今天终于把这个想法从 TODO List 拿出来思考并实现出来了。 这是地址： 短链服务 开发的过程太顺利，挺有意思，所以在此记录下整个实现，流水账很罗嗦，技术也不复杂，推荐扫一眼即可。 一、目标和需求 正常的短链服务一般用来做网址缩短，比长段的 URL 更容易分发，顺便同时在重定向的过程中做访问统计等。本质上只需要一个类似 KV…","id":"ebe45031-3d41-5792-b4d9-5529e4c4a168","fields":{"title":"🔗 30 分钟创建一个短链服务 ","description":"“域名很简练，如果用来做短链服务的话应该挺有意思” 这个想法一直存在，决定要做之后发现还是挺容易实现的，过程很有意思。","slug":"/blog/short-url-service-in-30-minutes","date":"2020-09-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔗 30 分钟创建一个短链服务 ","date":"2020-09-18 12:23:35","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='119'%3e%3cpath%20d='M193%20101v5h16V95h-16v6'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.3645083932853717,"src":"/static/abac10aa1271ddc100a766e57da44f0c/be9cc/banner.png","srcSet":"/static/abac10aa1271ddc100a766e57da44f0c/77247/banner.png 180w,\n/static/abac10aa1271ddc100a766e57da44f0c/375c0/banner.png 360w,\n/static/abac10aa1271ddc100a766e57da44f0c/be9cc/banner.png 720w,\n/static/abac10aa1271ddc100a766e57da44f0c/8c853/banner.png 1080w,\n/static/abac10aa1271ddc100a766e57da44f0c/18c35/banner.png 1403w","srcWebp":"/static/abac10aa1271ddc100a766e57da44f0c/f1dd6/banner.webp","srcSetWebp":"/static/abac10aa1271ddc100a766e57da44f0c/5e0c5/banner.webp 180w,\n/static/abac10aa1271ddc100a766e57da44f0c/c5804/banner.webp 360w,\n/static/abac10aa1271ddc100a766e57da44f0c/f1dd6/banner.webp 720w,\n/static/abac10aa1271ddc100a766e57da44f0c/00479/banner.webp 1080w,\n/static/abac10aa1271ddc100a766e57da44f0c/477d3/banner.webp 1403w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"short-url-service-in-30-minutes","categories":["code"],"tags":["短链","Baas"]}}},{"node":{"excerpt":"…","id":"7ca52204-5de7-5721-82df-a39c38ac429b","fields":{"title":"⛓ 未来协议","description":"对未来互联网和生活的畅想，发挥点想象力的天马行空。","slug":"/blog/future-protocol","date":"2020-09-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⛓ 未来协议","date":"2020-09-10 17:26:31","banner":null,"slug":"future-protocol","categories":["code"],"tags":["思考"]}}},{"node":{"excerpt":"IOS 上的背景模糊效果真的非常的惊艳，从 CSS backdrop-filter 这个属性可用以来就实验性的玩过，除了兼容性问题上硬伤(目前 86% 左右，尤其是国内 X5 内核等魔改内核（微信和很多 APP 内置的浏览器）)，效果还是很不错的。 一、什么是亚克力 前两天又看到了微软的 Fluent Design，Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 其中看到了 UWP 设计和 UI 中介绍的一个效果：亚克力材料。Acrylic 是一种 Fluent Design…","id":"6505615e-7a9b-518c-b5c4-380c5d6add61","fields":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","slug":"/blog/fluent-acrylic","date":"2020-08-05"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","date":"2020-08-05 19:18:10","banner":null,"slug":"fluent-acrylic","categories":["code"],"tags":["css","acrylic","UI-Library"]}}},{"node":{"excerpt":"〇、背景 Node.js 是一个了不起的应用，将 JavaScript 这个偏居一隅的脚本，变成了领域边界非常广阔的应用语言，就这一点来说怎么夸赞都不为过。 前些年 Node.js 在仅有的 ES 标准下发展壮大，不过近些年随着 ES 标准的演进，TypeScript 的广泛应用，Node.js 曾经引以为傲的生态，逐渐的变得拖后腿了。 与我而言影响比较大，让我不太习惯、不太喜欢的有： TypeScript 的集成不太行 Promise、await 等语法生态的缺失 CommonJS 和 ES Module…","id":"8f37d124-ec81-52a3-85ef-12560d306667","fields":{"title":"🐍 新技术尝个鲜 - deno","description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","slug":"/blog/deno-introduce","date":"2020-07-20"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐍 新技术尝个鲜 - deno","date":"2020-07-20 20:28:12","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='195'%3e%3cpath%20d='M84%2053c-42%2015-38%2075%206%2083%2042%208%2068-46%2036-74a43%2043%200%2000-42-9m-1%2031l-4%203c2%202%200%203-1%202-2-2-6%204-6%207%201%207%2012%209%2023%206l4-1c1%201-1%203-2%203s-2%204-1%2014v15l5-1%2010-2%205-1v-10c-2-20-4-27-10-32-5-5-15-7-23-3'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.051851851851852,"src":"/static/6ecc1d3a3f78edafaddd14a519392e6f/be9cc/banner.png","srcSet":"/static/6ecc1d3a3f78edafaddd14a519392e6f/77247/banner.png 180w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/375c0/banner.png 360w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/be9cc/banner.png 720w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/8c853/banner.png 1080w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/7c4c0/banner.png 1108w","srcWebp":"/static/6ecc1d3a3f78edafaddd14a519392e6f/f1dd6/banner.webp","srcSetWebp":"/static/6ecc1d3a3f78edafaddd14a519392e6f/5e0c5/banner.webp 180w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/c5804/banner.webp 360w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/f1dd6/banner.webp 720w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/00479/banner.webp 1080w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/37fa9/banner.webp 1108w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"deno-introduce","categories":["code"],"tags":["deno"]}}},{"node":{"excerpt":"…","id":"efef442d-0f5c-556e-a942-17e00d70eb08","fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","slug":"/blog/marry","date":"2020-07-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","date":"2020-07-10 20:08:10","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='128'%3e%3cpath%20d='M0%2064v64h401V0H0v64m104-54l-24%207c-19%203-18%203-18%205%201%201%200%202-1%203-2%200-1%201%202%2013l8%2027c2%2013%202%2014%205%2014l2%202c0%201-1%202%2013-3a353%20353%200%200141-12l1-2c2-2%202-3-2-16-3-7-6-19-7-26-2-12-3-13-5-13l-2-1c-1-2%200-3-13%202m7%203l-8%203%201%208%201%208h4c12-2%2014-3%2014-5a238%20238%200%2001-4-16l-8%202m-20%203c-8%202-7%202-6%2010l1%208-2-7-1-8c-1-1-16%201-18%203l2%208c1%209%201%209%204%209%202%200%202%200%200%201-2%200-2%201-1%2010%202%209%203%2010%203%201%200-3%200-6%201-5h1l1-3c1-2%205%201%204%203%200%201%201%202%203%202l4%204%202%204-1-4c-1-11-2-15-4-15l-6%201-5%201%206-2%207-2h1c0%203%201%200%202-4%200-7%201-10%203-10l3%202c0%202%201%203%204%203%205%201%204%201%203-6-1-6-1-5-11-4m111%206v43l1%2042h48V22l-24-1-25%201m76%206l-2%204-1%201c-2%201-2%202-2%205l1%205h12l1-4c0-4-3-11-4-9h-1c0-3-3-4-4-2m-158%203l-4%201-5%201c-6%200-5%200-4%208l3%2010v-8l3-4c1-5%202-5%207%200%203%203%204%204%204%206-1%202%200%203%201%203%202%200%201-3-2-16l-1-2-2%201m105%201l-5%201c-4-1-4-1-5%202%200%202-1%204-3%205-3%201-3%201-3%207l-2%2010v8l1%208v4l1-3%203-6%203-3c3%200%203-4%200-7-1-2-2-3-1-7%201-6%204-12%205-10h3c2%200%203%201%201%204-1%201%200%202%201%203l2%203c-1%201%200%203%201%205l4%208c0%205%204%2018%205%2019%200%201%203%200%205-2l5-3-1-6%201-10v-8l-3-10c0-3-1-5-2-5l-1-2-2-2-6-2c-3-3-5-4-7-1m119%2015c-2%204-2%204%2012%203%2012%200%2018-1%2010-1-2%200-3%200-2-1%200-2-3-3-13-3-5%200-7%200-7%202m-66%203l-2%204-2%203-1%205c0%202%200%202%208%202h7l-1-4c0-5-3-8-5-7l-1-2c1-3-1-3-3-1m-161%201l-8%201%204%2017%2017-3-2-9c-1-9-1-9-11-6m252%201c3%202-2%205-6%205-5-1-6%200-5%204%200%204%201%205%203%204v-2l9-1c9%200%2011-1%2011-2%200-3-2-4-7-4-3%200-4%200-3-2%200-2%200-3-2-3v1M99%2054l-8%201v6l1%206-1-6-2-5-17%203%202%209c1%208%202%209%203%209l8-2%208-3h1l1%201v-1l1-4v-3l4-7%201%202c0%202%200%202%202%202%201-1%205%202%205%203l2%204c1%201%201%201%201-3l-4-14-8%202m178%2017c0%202%200%202-1%201-1-2-3%205-3%2011%200%201-1%202-3%202-3%201%2010%201%2015%201%202%200%203%200%203%202h1c1-2%207-3%209%200l3%201v-1c-1-2%200-2%202-2s3%200%202%202l1%202c1%201%201%200%201-1%200-3%200-3%205-3l-9-1h-15l-1-4-3-5c-2-1-2-1-2-3%201-1-1-4-3-4l-2%202m3%2025c1%202-2%204-7%205-5%200-5%200-5%203v3h49v-4l-1-3c-2%202-18%200-18-2l-1%201c-2%204-6%202-7-2-1-3-1-3-1-1v3c0%202-1%201-2-1l-3-1-3-2c-1-1-1-1-1%201m55%200l-1%206v5h49V96l-24-1-24%201m-206%2013v3l-1%203v1l1%202%201%202%201-3c0-2%200-3%201-2l1%202c0%202%201%203%203%203h4v-12h-3c-4%200-4%200-4%203%200%202%200%203-1%202l-1-1-1-4-1%201m14%201v9l1-3%201-2c2%201%202%203%201%205-1%201-1%201%201%201%202-1%203-1%203-3l1-3%201%203c-1%204%201%203%202-1%201-5%200-8-3-8-1%200-2%201-2%203l-1%203v-3c0-4-5-4-5-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.1218905472636815,"src":"/static/6701d75556a4650d2381158d8d4b0b71/30bd0/banner.jpg","srcSet":"/static/6701d75556a4650d2381158d8d4b0b71/1cd47/banner.jpg 180w,\n/static/6701d75556a4650d2381158d8d4b0b71/0aeec/banner.jpg 360w,\n/static/6701d75556a4650d2381158d8d4b0b71/30bd0/banner.jpg 720w,\n/static/6701d75556a4650d2381158d8d4b0b71/2e512/banner.jpg 1080w,\n/static/6701d75556a4650d2381158d8d4b0b71/28df3/banner.jpg 1440w,\n/static/6701d75556a4650d2381158d8d4b0b71/24b7e/banner.jpg 2510w","srcWebp":"/static/6701d75556a4650d2381158d8d4b0b71/f1dd6/banner.webp","srcSetWebp":"/static/6701d75556a4650d2381158d8d4b0b71/5e0c5/banner.webp 180w,\n/static/6701d75556a4650d2381158d8d4b0b71/c5804/banner.webp 360w,\n/static/6701d75556a4650d2381158d8d4b0b71/f1dd6/banner.webp 720w,\n/static/6701d75556a4650d2381158d8d4b0b71/00479/banner.webp 1080w,\n/static/6701d75556a4650d2381158d8d4b0b71/aa813/banner.webp 1440w,\n/static/6701d75556a4650d2381158d8d4b0b71/6940d/banner.webp 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"marry","categories":["think"],"tags":["美好"]}}},{"node":{"excerpt":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。 这几天瞥到宣传图突发奇想，不就是个3D球吗？WEB 上好像也能实现，要不试试？ 预览可戳(16MB 左右，爪机慎点，源码在最后)：   超级火星 一、技术实现 整个内容包括俯瞰的一个视角、一个侧面部分视角、一个转场到目标位置的视角。 全部都是 3D 的内容，所以这块一定要用 Three.js…","id":"7a4db9ef-9f76-5854-b2fa-b70aa7635e36","fields":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","description":"当初 MIUI 12 发布时，超级壁纸功能着实看起来特别的有感觉，之前已经申请开发版内测，第一时间体验下来整个桌面到息屏的动画流畅，最后手机息屏之后一个火星在屏幕上还是挺震撼的。但，不就是个3D球吗！？","slug":"/blog/move-miui-12-super-wallpaper-to-web","date":"2020-07-02"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌏 把 MIUI 12 的超级火星搬到 Web 上","date":"2020-07-02 15:55:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='128'%3e%3cpath%20d='M0%2064v64h401V0H0v64m124-45c-5%201-11%203-10%204l-1%201h-2l-4%203c-4%203-6%205-4%207%201%201%202%203%201%204%200%202%201%204%205%208l6%209c1%204%206%207%207%205%201-1%207%202%207%203l1%201c2-2%201-4-1-4l1-1c2-1%203-1%205%201s2%202%203%201c0-2%202-1%202%201v2l3%201%201-1%201-3c1-2%201-1%201%204%200%202%206%201%209-1l2-3v-1l1-1v-2h1l1%202%201%202c0%205%202%204%202-1%200-3%200-3%201-2%200%203%202%203%202%200l1-5%202-2v2l1%203v-4c-2-14-12-26-26-31-4-2-16-3-20-2m233%201l2%201c2%201%202%201-1%201l-2%202v1h-1l-1-1v7h1l2%201c0%202%202%202%206%202l6%201-2%201-4%201-4%201-4-2-3-1v6l-3-3c-1%200-2-4-1-6l-2-1h-2l-2-2c-1-1-2-2-1-3h1c1%201%205%200%205-1l-5-4c-6%200-7%200-7%203l2%203h2l-2%201c-2%200-2%200-2%2013l1%2012%203%202c2%201%202%201%203-1%200-1%201-2%202-1%201%200%205-3%205-5l-1-2-2-1c0-1%203%200%205%202%201%201%200%202-1%205l-1%204-2%202c-5%202-5%205%201%2010l3%204c0%202%203%205%206%205l1%202c0%203%203%205%205%204h3c1%202%201%202-1%202s-3%202-1%204l3%205%202%204c3%200%207-2%209-4l3-1c1%200%201%201-2%205s-4%205-4%209%200%205-2%206%202%202%209%202h7V81l-1-48V19h-15l-16%201m-54%207l-9%204c-2%202-5%203-6%202l-3%201%202%201c1%200%200%202-3%205-11%2012-16%2031-11%2038%205%205%209%205%208-1%200-3%201-4%204-2h3c3-3%206-8%206-10%201-3%203-3%203%200h3l-1-1v-2c0-1%200-2-2-2l-2-1%202-1c2%200%203-2%204-5%202-4%203-6%205-6%201%201%203-1%203-2l-1-1c-2%201-5-3-4-4l2%201h1l4-2%202-1%203-1h1l-3-3c-6-3-6-5%200-3h6c1%201%201%200%201-1%200-3-1-4-8-4-3-1-6%200-10%201m-80%2021l-5%201-1%201-2%201-2%201-2%205c-2%204-3%2011-1%2011l2%201c1%201%202%202%205%202h6c3%201%2010-1%2013-4%204-3%206-12%203-15-4-3-11-5-16-4M13%2082c-1%202%200%206%201%206v1c-4%203-2%205%205%205l6-1-2-1v-1c1-2%201-2-3-2l-3-1h3c4%200%204%200%204-3v-3c1-1%200-1-3-1l-5-1-3%202m18-1l-2%201c-2%200-2%200-1%201v2l1%202v2c-3%203-1%203%202%200l2-1-3%203-2%203%202-1h10V81c-1-1-1%201-1%205%200%206%200%206-2%206s-2-1-2-4l-2-4c-1-1-1-1%201-1s2%201%202%204l1%204%201-5c0-4%200-4-2-4l-4-1h-1m76%200l-1%207c0%206%200%206%203%206s3-1%203-4c0-4%200-4%202-2l3%201-1-2c-3-2-2-3%200-3s2%201%202%204c0%202%200%203-2%204-3%200-3%202%200%202%204-1%204-12%201-12-1%200-2%200-1-1l-1-1-2%202v2l-2-2c-2-2-2-2-4-1m16%201v1l1%201-1%201c-1%200-2%202-2%205l1%204%201-1h12l-4-1c-5%200-6-1-4-2h1l3%201h4v-5c0-5-1-5-3-5l-3%201-2%203-1-1%201-1v-1c-2-2-2-2-4%200m15%200c-2%205-1%207%202%207h3l-3%201c-3%202-3%202-1%202l2%201h8l2%201-1-2c-1-1-2-2-1-3v-5c0-3-1-3-3-3-3%200-4%200-3%204%200%203%200%204-1%203-2%200-2-1-1-3v-4c1-2-2-1-3%201m20-1c-5%200-5%200-5%203s0%204%203%205c2%201%202%201%200%201s-2%200%201%201l3%201h-4c-6%200-3%202%204%202%206%200%209-2%203-2-3%200-3%200-1-1%202%200%203-1%203-2v-1l1-3c0-4-1-5-8-4m11%202v4c-2%202-1%203%202%203h2l-2%201-3%201h2l3%201h6c1%202%203%200%203-2h-2c-1-3-1-4%201-4v-1h-1l-1-2%202-2c1-1%200-1-3-1l-6%202v-1c0-3-1-3-3%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.1218905472636815,"src":"/static/5ced1533e64532fcef1ef1fb54dbf043/30bd0/banner.jpg","srcSet":"/static/5ced1533e64532fcef1ef1fb54dbf043/1cd47/banner.jpg 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/0aeec/banner.jpg 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/30bd0/banner.jpg 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/2e512/banner.jpg 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/28df3/banner.jpg 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/24b7e/banner.jpg 2510w","srcWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/f1dd6/banner.webp","srcSetWebp":"/static/5ced1533e64532fcef1ef1fb54dbf043/5e0c5/banner.webp 180w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/c5804/banner.webp 360w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/f1dd6/banner.webp 720w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/00479/banner.webp 1080w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/aa813/banner.webp 1440w,\n/static/5ced1533e64532fcef1ef1fb54dbf043/6940d/banner.webp 2510w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"move-miui-12-super-wallpaper-to-web","categories":["code"],"tags":["Three.js","3D","Mars"]}}},{"node":{"excerpt":"当你想要排序的时候，肯定会需要用到 sort 方案，但是请切忌排序结果没问题，但是过程是一个黑盒。 问题 需求是随机获得 0-16 的数字组合，用处是来打乱一副牌，但是需要保证两人相同的随机过程。所以做了一个种子随机数，两个人实现同样的打乱过程，初步想法。 于是： 上面的程序在浏览器里面运行没问题，重复 n 次还是这个结果。 结果在测试的时候出现了问题，两个人的结果不同。排查了数据同步问题等，发现问题出在这个随机序列的生成上。怎么回事，相同的代码啊？？ 详细询问了用户环境，出问题的浏览器版本比较老，看了下是 chrome 62 的内核，自己跑一下： 复现了问题，同时也能够在 chrome vs…","id":"90a5685e-ac35-574c-b3f0-e2405184100e","fields":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","description":"想要使用种子生成一个地图，然后遇到了一个很奇怪的问题，发现 sort 内部实现的黑盒~~~","slug":"/blog/random-and-sort","date":"2020-06-15"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🥧 一次意外的 Bug 竟然是因为它 ？！Array.sort 使用避坑","date":"2020-06-15 20:08:10","banner":null,"slug":"random-and-sort","categories":["code"],"tags":["sort","random"]}}},{"node":{"excerpt":"想分享的是现代团队协作的基础建设，简单梳理下日常持续集成的方法 持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。 〇、前言 持续集成和部署，大部分需要理清从构建到部署中间需要哪些步骤和状态，手动怎么做的，声明或者脚本实现一模一样的流程，加上一些错误边界处理、通知或者触发条件等，很多流程相似又不太相同。 具体选择哪些部署方式、哪些工具、什么技术、是否需要人工介入、通知等都有太多的选择了，不过目标最终都是一致的，用自动化的流程解放人力。 持续，很大程度上可以理解成：流程和自动化。一旦把一个重复的 workflow…","id":"e2a8341f-425c-576f-bb41-0e8383ee1cc9","fields":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","description":"持续集成是现代团队协作的基础建设了，一个成熟的团队肯定会搭建自己的整个持续集成和持续部署流程。","slug":"/blog/ci-cd","date":"2020-05-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🙅‍ 持续集成和部署(CI 和 CD)","date":"2020-05-18 13:54:13","banner":null,"slug":"ci-cd","categories":["code"],"tags":["持续集成","持续部署","前端"]}}},{"node":{"excerpt":"想分享的是 serverless 的理解，保持眼界开阔，思考能力的价值，拥抱变化~~~ 一、什么是 serverless 无服务架构 听起来很高大上，火的不要不要的词，看了 n 篇文章也不知道是什么，都在说思想多好多好，什么 Faas、Baas、无服务化、云原生之类的词，看的更迷糊了。 其实： serverless 就是不需要买/租服务器就能把程序运行起来。 小朋友有很多问号： 那程序放到哪？  放到云服务商提供的云函数里面。 怎么提供服务？  一个云函数可以使用 http…","id":"5145372e-fd2a-5b70-aa1a-fa32efbc2637","fields":{"title":"🌀 serverless 时代和云计算时代","description":"serverless 就是不需要买/租服务器就能把程序运行起来。那程序放到哪？怎么触发？调用数据库怎么办？怎么写代码？怎么部署和运行？","slug":"/blog/serverless-and-cloud-compute","date":"2020-04-20"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌀 serverless 时代和云计算时代","date":"2020-04-20 21:22:43","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='180'%3e%3cpath%20d='M0%2090v90h401V0H0v90m163-77v1l-3%202-3%201c0-2%200-1-7%202l-5%203%205%203c7%203%208%204%206%201-3-3-2-3%204%201%204%202%204%202%202%203l-2%201%202%201%203%202-13-6c-7-4-8-5-10-4s-2%201-1%202%201%201-1%201h-1c1%201%201%201-2%202l-3%201-8%205%2011%205-2-3c-5-3-2-3%204%202%205%202%205%203%203%203h-2l3%202%201%203v1l1%2021%201%2019V46l4%202c5%202%206%203%204%201-2-3-1-2%206%201%205%203%205%203%203%204l-2%201%202%201c2%201%202%201%202%2022l1%2021%209-5%209-5V47l-8-5c-8-5-11-8-4-4%204%201%205%201%202-1-3-3%201-2%206%202%205%202%205%203%203%203h-2l2%202%203%202v41l8-4%209-6c2%200%202-2%202-17l1-17v-1l-1-4c0-3%200-4-9-9a71%2071%200%2000-12-6c0-1-17-11-19-11l-2%201m-11%2089l-8%205-8%204-3-2-5-2c0%201%206%205%2010%205%202%201%204%200%207-2%205-2%206-2%206-1l-7%205-8%204-7-4c-5-3-8-5-7-6l-1-1c-3%201-2%203%206%208%2010%206%2012%206%2020%201%207-3%209-7%206-8v-7l-1%201m51%2030c0%206%200%207%202%207l1-3%201-3%202%203%204%203c1%200%201-1-1-4v-3c3-4%200-8-5-8h-4v8m39%200c0%206%200%207%202%207l1-3%201-3%202%203%204%203c1%200%201-1-1-4v-3c3-4%200-8-5-8h-4v8m-38%2012c-2%202-3%209-1%2011%204%206%2012%202%2012-5s-7-11-11-6m29%206v7h4c6%200%208-2%208-7%200-6-2-8-8-8h-4v8m35-7c-4%202-4%2011%200%2013%207%205%2014-5%209-12-1-2-6-3-9-1m-63%202c-3%203-1%2011%204%2011%203%200%204-3%204-7%200-5-5-8-8-4m64%200l-2%205c0%205%207%208%209%204%204-7-3-15-7-9'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2222222222222223,"src":"/static/63915122abea25dcad04ca23d30ff2a8/be9cc/banner.png","srcSet":"/static/63915122abea25dcad04ca23d30ff2a8/77247/banner.png 180w,\n/static/63915122abea25dcad04ca23d30ff2a8/375c0/banner.png 360w,\n/static/63915122abea25dcad04ca23d30ff2a8/be9cc/banner.png 720w,\n/static/63915122abea25dcad04ca23d30ff2a8/8c853/banner.png 1080w,\n/static/63915122abea25dcad04ca23d30ff2a8/d8210/banner.png 1200w","srcWebp":"/static/63915122abea25dcad04ca23d30ff2a8/f1dd6/banner.webp","srcSetWebp":"/static/63915122abea25dcad04ca23d30ff2a8/5e0c5/banner.webp 180w,\n/static/63915122abea25dcad04ca23d30ff2a8/c5804/banner.webp 360w,\n/static/63915122abea25dcad04ca23d30ff2a8/f1dd6/banner.webp 720w,\n/static/63915122abea25dcad04ca23d30ff2a8/00479/banner.webp 1080w,\n/static/63915122abea25dcad04ca23d30ff2a8/f9d14/banner.webp 1200w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"serverless-and-cloud-compute","categories":["code"],"tags":["serverless"]}}},{"node":{"excerpt":"想分享的是数据库相关的基本知识和 SQL 的相关概念，完备的回顾下相关能力，温故知新~~~ 刚开始写代码自学的时候，目的就是做网站，所以接触了很多的后台 PHP 和数据库相关的能力，工作中很长一段也承担了中间层和后台管理系统的搭建，所以可以说挺熟悉的。但是没有完备系统的整理过数据库的相关能力，平时 SQL 查询没问题，但是一旦跟别人讨论就变得没法十分确定了，这里整理一下，温故知新~ 一、数据库 Database、DB 是数据库，我们平时叫的数据库，更多表示数据库管理系统（Database Management System，DBMS），例如 Mysql、Sqlite、Oracle、dBASE…","id":"ab0ef5c6-d8c2-5d3a-b4d2-9a7ad1aaf49e","fields":{"title":"📃 数据库和 SQL","description":"数据库在日常开发中接触很多，其中的存储思想和方法对于数据和接口的理解大有裨益，虽然很多端侧开发可能不会直接接触，但是系统的了解下是很有必要的。","slug":"/blog/database-and-sql","date":"2020-04-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📃 数据库和 SQL","date":"2020-04-10 20:49:53","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='117'/%3e","aspectRatio":3.4297297297297296,"src":"/static/b692ff0ef0c34954d59b28d424c27f5f/be9cc/banner.png","srcSet":"/static/b692ff0ef0c34954d59b28d424c27f5f/77247/banner.png 180w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/375c0/banner.png 360w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/be9cc/banner.png 720w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/8c853/banner.png 1080w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/4715e/banner.png 1269w","srcWebp":"/static/b692ff0ef0c34954d59b28d424c27f5f/f1dd6/banner.webp","srcSetWebp":"/static/b692ff0ef0c34954d59b28d424c27f5f/5e0c5/banner.webp 180w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/c5804/banner.webp 360w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/f1dd6/banner.webp 720w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/00479/banner.webp 1080w,\n/static/b692ff0ef0c34954d59b28d424c27f5f/d803f/banner.webp 1269w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"database-and-sql","categories":["code"],"tags":["SQL","整理","数据库"]}}},{"node":{"excerpt":"想分享的是让你知道一个项目的初始化并不是必须要各种脚手架，只要你知道要什么和其中的配合，就很容易初始化需要的项目。 1、背景 前端工程化肯定会考虑的就是项目的初始化，或者很多的启动模板能节省很多的时间，不用纠结很多配置。 项目对功能的需求当然是不同的，大公司多人协作的话，工程化是必须的，毕竟有人能够维护，但是对于个人的话没有那么多的维护，工程化并没有那么好的收益（我个人建议能工程化的地方尽量抽象出来，效率还是有很大提升的，不仅仅是项目初始化的问题）。自己的小项目可能很多时候需要手动配置，长时间不用这些技术就生疏了，这里渐进的实现一个现在经典的开发环境  React  +  TypeScript…","id":"24c013f9-6ca3-5c34-86f6-7c15b7f321b5","fields":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","description":"工程化、脚手架等关键词，让现代人都忘了原始怎么从零开始了，怎么能搭建一个初始环境其实没有那么复杂，今天只用六步从零实现一下这个过程。","slug":"/blog/start-from-empty-to-ts-react","date":"2020-03-25"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"👌 简单 6 步从零开始配置 ts 和 react 环境","date":"2020-03-25 13:50:19","banner":null,"slug":"start-from-empty-to-ts-react","categories":["code"],"tags":["功能","思考","最佳实践","babel","Webpack","ES6","TypeScript"]}}},{"node":{"excerpt":"想分享的是只需要一点点的数学计算就能实现 Flutter 中不同 fitMode 的图片的 Hero 转换动画。 我们经常在很多 app 都见到过在列表页的小图，点击后小图连续的动画，变成大图展示在顶部，特别的流畅。这就是 flutter 里的 hero 动画，也就是 共享元素转换 ，像一个超人一样飞来飞去的组件。 例如下面的代码(需要 科学上网 )： 实现的方式就是两个页面中用 Hero…","id":"6df12020-1eb1-5808-9368-b9e4f65d85d3","fields":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","description":"最简单的数学计算，实现不同 fitMode 图片的 hero 动画，避免出现动画割裂。 flutter hero 是个很酷的东西，经常在列表到详情切换中用到。","slug":"/blog/flutter-hero-with-image-fit","date":"2020-03-19"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🍻 flutter 在不同 fit 图片上的 hero 动画","date":"2020-03-19 17:38:57","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3e%3cpath%20d='M235%201l26%2016%2026%2015v9l-20-11-20-12-9%205-9%206-1%2023v24l-34-20-33-19-1%204v4l24%2014%2024%2014v14l-4-2-3-2v4c0%204%202%205-22-9l-19-11-26%2016-28%2016a2065%202065%200%2000120%200l-6-4c-5-2-7-4-6-4h3l6%205c7%204%207%204%2016%204l9-1c-2-2-23-13-25-12-4%201%203-3%2040-24%2035-21%2039-23%2041-22%203%203%2056%2033%2057%2033s-8%206-20%2012l-22%2013%2040%201h41V0H279l-7%204-6%204-8-4c-6-4-7-4-15-4l-8%201M20%2019l-7%207%202%202c2%201%202%201%2011-7l8-9h-4c-3%200-4%201-10%207m3%209l-4%203%204%204c3%203%204%204%207%204%205%200%205%200%201-5l-3-3%203-3%203-4h-3c-3%200-5%201-8%204m184%2013l-5%203%2018%2011-8-17-5%203'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/77247/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/375c0/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/8c853/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/43380/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/ab3db/banner.png 1600w","srcWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp","srcSetWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/5e0c5/banner.webp 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/c5804/banner.webp 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/00479/banner.webp 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/aa813/banner.webp 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2e3ee/banner.webp 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"flutter-hero-with-image-fit","categories":["code"],"tags":["功能","技巧","flutter"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  开发中遇到的性能问题，和一些很容易的优化方法。 无论用什么语言开发应用的时候，性能和稳定性都是一个更高要求的方面，用 80% 的时间来拔高 20% 的效果。 这里因为业务的 APP 并没有达到那么大的用户量，所以不需要太深入，毕竟收益能效还不到深入的时候，所以这里也是仅仅优化常见的业务问题，比如非常影响性能的地方。 一、使用最佳实践 Performance best practices  这是官方的一篇文档，里面包含了很多的性能优化实践，比如： 将耗时的渲染操作，从 build 细化到子组件中。比如一个 build…","id":"0841789b-4d4a-56c2-bf8e-7778bd9770dc","fields":{"title":"💊 flutter 性能优化","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","slug":"/blog/flutter-performance","date":"2020-03-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💊 flutter 性能优化","date":"2020-03-10 19:32:51","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3e%3cpath%20d='M235%201l26%2016%2026%2015v9l-20-11-20-12-9%205-9%206-1%2023v24l-34-20-33-19-1%204v4l24%2014%2024%2014v14l-4-2-3-2v4c0%204%202%205-22-9l-19-11-26%2016-28%2016a2065%202065%200%2000120%200l-6-4c-5-2-7-4-6-4h3l6%205c7%204%207%204%2016%204l9-1c-2-2-23-13-25-12-4%201%203-3%2040-24%2035-21%2039-23%2041-22%203%203%2056%2033%2057%2033s-8%206-20%2012l-22%2013%2040%201h41V0H279l-7%204-6%204-8-4c-6-4-7-4-15-4l-8%201M20%2019l-7%207%202%202c2%201%202%201%2011-7l8-9h-4c-3%200-4%201-10%207m3%209l-4%203%204%204c3%203%204%204%207%204%205%200%205%200%201-5l-3-3%203-3%203-4h-3c-3%200-5%201-8%204m184%2013l-5%203%2018%2011-8-17-5%203'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/77247/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/375c0/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/8c853/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/43380/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/ab3db/banner.png 1600w","srcWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp","srcSetWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/5e0c5/banner.webp 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/c5804/banner.webp 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/00479/banner.webp 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/aa813/banner.webp 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2e3ee/banner.webp 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"flutter-performance","categories":["code"],"tags":["整理","性能优化","flutter","调试"]}}},{"node":{"excerpt":"小公司和大公司的产品目标一样的情况下，整体思路有很多差异，而每个公司不同阶段，项目需求迭代，用户量上升，都会涉及到架构的演进。而小公司一人多职位，需求变更频繁：没有专业甚至专职的产品经理把控需求，技术能力偏低：大量入门人员和实习生，起点较低：不需要那么复杂的技术发展路线。这样的环境差异，导致技术架构的演进几乎和大公司差异很大。今天来唠一唠小公司技术架构层面的演进，没有代表性，至少很多是我从手中堆起来的全部架构。 一、背景差异 大公司技术支持比较完善，内部的开发平台、组件平台、构建平台都有现成的，有更标准化的开发规范、设计语言和内部沉淀等，Leader…","id":"b21210c2-f124-5473-9732-6336302a2ae0","fields":{"title":"🚴‍♀️ 小公司的技术架构演进","description":"不算实习也已经从业 5 年，在小公司见证了很多架构从零搭建起来，从零开始承接流量，这里分享下我眼里的大前端技术架构演进","slug":"/blog/technical-architecture-evolution-in-small-company","date":"2020-03-02"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚴‍♀️ 小公司的技术架构演进","date":"2020-03-02 20:12:18","banner":null,"slug":"technical-architecture-evolution-in-small-company","categories":["think"],"tags":["整理","思考","技术演进","flutter"]}}},{"node":{"excerpt":"大部分的 React 开发是不需要考虑性能优化的，因为很多业务复杂度不需要这么苛刻的需求，常见的页面和交互都比较简单，展示型的组件除了长列表并没有太多性能问题。不过 React 这类框架生来就是能够搭建大型单页应用的，所以性能问题在这些应用级别的页面中还是很值得说道的。 好巧不巧，我在项目中就遇到了很多的性能问题， 🌋 WebIDE 的开发记录其一（前言和概览）  业务模型很复杂，状态管理很复杂，很多组件更新频繁，实践了很多的性能优化的手段，这里总结下。 一、量化指标 “卡顿” 是个很主观的感受，性能优化之前需要将这个事情量化，一定程度可以说 “卡顿” = “超过 16.67ms…","id":"beeddcae-7d80-5cbf-9952-0567f3ee19be","fields":{"title":"📊 React 实践技巧和性能优化","description":"如今单单实现业务目标已经不够了，性能和体验是上层产品的基础，更加优质、体验更好的业务变得越来越重要。所以实现极致的性能、提升产品体验，是很值得追求的一件事情。","slug":"/blog/react-pratice-and-performance","date":"2020-02-24"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📊 React 实践技巧和性能优化","date":"2020-02-24 20:24:36","banner":null,"slug":"react-pratice-and-performance","categories":["code"],"tags":["react","hooks","pratice","performance","技巧","最佳实践","性能优化","思考","功能"]}}},{"node":{"excerpt":"1. Typescript…","id":"e64b5c46-84ab-5699-bc5b-d5460491e764","fields":{"title":"🤔 技术背后隐含的思维方式","description":"很多技术的实现不是简单的解决某个场景，解决方案之后还有着不同的思考和思维方式，比如 Hooks、Flux、Fiber、TypeScript，这篇文章聊聊~~","slug":"/blog/thinking-behind-tech","date":"2020-02-16"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🤔 技术背后隐含的思维方式","date":"2020-02-16 10:17:10","banner":null,"slug":"thinking-behind-tech","categories":["think"],"tags":["整理","思考","Typescript","ReactHooks","Fiber","Flux"]}}},{"node":{"excerpt":"PS: 仓库和代码在最下面； PS 2 : 后续出现了一些问题和痛点，做了很多的改进：  📦 改进一个简单朴素的 react 数据管理层 NOVUS ，包括同步触发、初始化、自动依赖收集、“喘息机制”、Novus 版 Fiber 和测试，本篇重点说需求、基础功能和初步实现。 PS…","id":"0d56e544-58e4-592d-9f5f-8518cdeb0cfc","fields":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","description":"我喜欢的全局数据管理层只需要一个数据层，而不是各种范式、同步异步的需求，更不是没办法代码提示的各种 Action Type，尤其是没有 typescript 支持，不喜欢各种类型写好多次，不喜欢各种数据层概念，只想要实现一个简单朴素的数据管理工具","slug":"/blog/novus","date":"2020-02-07"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📦 实现一个简单朴素的 react 数据管理层 NOVUS","date":"2020-02-07 22:50:20","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='142'%3e%3cpath%20d='M0%2071v71h401V0H0v71m302-50h-12c-9%200-11%200-11%202%200%201%208%202%2010%200h1l12%201%2014%201c2%200%202%200%202-2s-1-2-8-2h-8M7%2067l32%201%2031-1-31-1-32%201m0%2025'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.811088295687885,"src":"/static/fca957b9be8350ac79ddfe25ec32c595/be9cc/banner.png","srcSet":"/static/fca957b9be8350ac79ddfe25ec32c595/77247/banner.png 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/375c0/banner.png 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/be9cc/banner.png 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/8c853/banner.png 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/1bbb9/banner.png 1369w","srcWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/f1dd6/banner.webp","srcSetWebp":"/static/fca957b9be8350ac79ddfe25ec32c595/5e0c5/banner.webp 180w,\n/static/fca957b9be8350ac79ddfe25ec32c595/c5804/banner.webp 360w,\n/static/fca957b9be8350ac79ddfe25ec32c595/f1dd6/banner.webp 720w,\n/static/fca957b9be8350ac79ddfe25ec32c595/00479/banner.webp 1080w,\n/static/fca957b9be8350ac79ddfe25ec32c595/5e581/banner.webp 1369w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"novus","categories":["code"],"tags":["整理","思考","功能","NOVUS","状态管理"]}}},{"node":{"excerpt":"一、什么是 DirtyDiff dirty 的意思在 Git 中表示当前本地代码与提交版本相比有修改，还没有提交。很多编辑器就会在行号旁边用颜色标识当前行的修改状态，用以提示用户当前文件状态，平时使用的时候是一个很好用的功能。 二、功能点 diffComputer 用来计算当前文件和 已提交文件的差别（修改、新增和删除） 将计算出来的差别转为 decorations 装饰器，将装饰器放到具体的每行里面 用户点击 decorations 后打开 peek 视图（OverlayWidget + ViewZone） peekView 中显示 diff 编辑器 三、集成 1. diffComputer…","id":"0a7e4be6-54c6-552e-b3fc-39ad3df74843","fields":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第七篇文章，谈谈怎么在 monaco-editor 上添加编辑器必备的 Git Dirty Diff 功能。","slug":"/blog/workpad-part-7","date":"2020-02-05"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其七（DirtyDiff 支持）","date":"2020-02-05 22:43:52","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-7","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","Dirty Diff"]}}},{"node":{"excerpt":"一、背景 一个 IDE 和编辑器很明显的使用区别就是  go to definition   go to references  的定义和引用跳转，缺少了这个功能，那么和最简单的记事本有什么区别。 如果稍微深入了解 monaco-editor 之后，不满足只是简单的编辑，想要自动提示、自动补全的功能，比如 VSCode 中引入模块文件之后，可以在当前文件中看到另一个文件中的数据引用、类型定义、参数提示等。 单从这个需求上来找解决方案的话，一番搜索之后发现 monaco-editor 在一定程度上是能够支持的。 先看结果： 二、内置的方案 1. addExtraLib…","id":"0513eb5d-f3c9-5c4e-8f3e-5e2ae27f582e","fields":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第六篇文章，谈谈怎么在 monaco-editor 上添加语言服务支持 LSP 的。","slug":"/blog/workpad-part-6","date":"2020-02-03"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其六（LSP 支持）","date":"2020-02-03 20:01:25","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-6","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","LSP"]}}},{"node":{"excerpt":"一、为什么要用 textmate 而不是内置的？ 实现 IDE 的过程中好奇为什么 moanco-editor 和 vscode 的高亮不太一样，比较简陋很不舒服，一番搜索发现  monaco-editor  的语言支持使用的是内置的  Monarch  这个语法高亮支持。 官方的解释  Why doesn't the editor support TextMate grammars? ： 主要就是因为  Textmate  语法解析依赖的  Oniguruma  是一个 C 语言下的解析功能，VSCode 可以使用 node 环境来调用原生的模块，但是在 web…","id":"ef6200b8-74e4-5feb-97d7-6347b0e8a360","fields":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第五篇文章，谈谈怎么在 monaco-editor 用 textmate 替换内置语法和高亮的。","slug":"/blog/workpad-part-5","date":"2020-01-27"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其五（monaco-editor + textmate）","date":"2020-01-27 20:03:43","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-5","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"一、为什么要终端 程序员对电脑的控制大部分还是需要终端的帮助，运行服务、执行代码、调试等等操作都可以在终端中完成，甚至编辑功能也可以在终端中实现，运行环境的管理、文件、程序等能在终端中操作。一般意义上，IDE 和 编辑器的最大区别也是有终端功能的支持。所以日常开发终端是必不可少的一个工具，而在 web 中也已经有很成熟的工具 Xterm.js。 二、基础概念 TTY、terminal、Shell、pty、bash、ssh 都是什么？ tty unix系统中表示为可以输入输出的设备，现在说的比较多的是虚拟终端 terminal…","id":"ea937ad6-feef-52c0-9b10-368b0dbd87b9","fields":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","slug":"/blog/workpad-part-4","date":"2020-01-23"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","date":"2020-01-23 21:45:01","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-4","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"一方面说怎么集成 monaco-editor 到项目中，另一方面怎么用扩展的形式加入新功能。 PS: 本文集成 monaco-editor 不是普遍适用的，包含很多针对当前项目的集成，所以仅供参考。 一、monaco-editor 是什么？ monaco-editor 是一个非常优秀的代码编辑器，大名鼎鼎的 VSCode 的编辑器内核，有非常强大的 IDE 功能支持。也正是有了这个优秀的工具才让浏览器编辑器成为了现实。 monaco-editor 准确的讲是从 VSCode 的源码中单独抽离出来能够直接在浏览器上运行，很多地方和 VSCode…","id":"6317de7e-38c0-57da-8793-840a407a4d8a","fields":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","slug":"/blog/workpad-part-3","date":"2020-01-19"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","date":"2020-01-19 21:00:41","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-3","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"基础架构就是实现什么核心功能，搭建一个什么样的接口，定义什么样的扩展开发方式。核心的开发模式很多，我选择的也并不是最优解，只是这个项目的实现，最后结果至少还不错，下面从三个方面说一下通用的层面做了哪些工作。 一. 扩展机制 （Extension） 每个 extension 里面都按照标准接口定义，注册数据模型、UI 渲染和命令机制。 【数据模型】需要对扩展内的全部数据进行管理，包括网络数据请求本地数据更新等； 【UI 渲染】需要根据全局的数据模型和本扩展数据，在 pannel…","id":"9a4bdb5c-4762-505d-b16f-1486fcb53e52","fields":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","slug":"/blog/workpad-part-2","date":"2020-01-12"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","date":"2020-01-12 22:23:32","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='179'%3e%3cpath%20d='M227%207a642%20642%200%200176%201l75-1v5h-24l-25-1h-1a239%20239%200%2001-51%200c0%202-49%202-49%200-1-1-1%200-1%202%200%203%200%203%201%202%202-3%2048-3%2049%200h1c2-3%2048-3%2049%200h2c2-3%2047-3%2049%200%201%201%201%200%201-5%200-4%200-6-1-5a2067%202067%200%2001-151%202M21%208c0%201%200%202%201%201l26-1c25%200%2026%200%2026%202s-2%204-2%202h-1c0%202-49%202-49%200l-1%201v3l1-1%2025-1c21%200%2024%200%2024%202l-8%201-9%201H19l-3%201c-1%200-2%200-1%201l1%2015-1%2015v1c2%200%202%2035%200%2035v1a379%20379%200%20011%2064c1%202%200%203-3%203h-2V87a516%20516%200%20010-68%20515%20515%200%20010%2068l-2%2067c-1%201%201%201%203%201l5%201-1%201v2l11%201h10v-6c0-6%200-7%202-7%201-1%201-1-1-1s-2%200-2%206v5H22v-20h22V92h-8v35l1-17V93h6v43H22v-7h6l7-1H22V87h37l1%203v-1c-1-7-1-7-5-7-3%200-3%200-3-2s1-3%202-3c2-1%202-16%200-17-5-1%200-7%205-7l1-4c1-4%200-5-1-2v3H29l1-6-1-10c-1-5-1-5-1-2%200%204%200%204-3%204-4%200-5-6%200-6%202%200%203-1%203-5%200-5%200-5%203-5l8-1h5l-1%204-1%204h-6c-5%200-3%201%208%201h14v-4c0-6%202-5%202%201l1%205h10v4c0%204%200%205-2%205v1l1%207c0%205%200%206%202%206s2-1%202-11l1-11h2v-1c-2%200-2-1-2-8v-8h23l23%201c0%201-2%202-7%203-8%200-7%202%202%202h3v16l-1%2017c-5%200-6%200-6%203%200%202%200%202%207%202%204%200%206%200%205-1-2%200-2-1-2-12V34h4l3-1%202-2%201-1v-3c1-1%200-3-2-4l-2-2%207-1c8-1%2021-1%2031%201%205%200%205%200%205%204%200%203%200%203-3%203s-3%200-3-4l-1-3v7h-9c-5%200-7%201-4%201%204%200%204%200%203%203-1%204-1%204%204%206%204%201%204%201%204%206v4h-8l-7%201h17v4c0%203%201%204%203%204l3-1-2-1c-3%200-3%200-3-3s0-3%203-3h3v20h-37l-1-3-1-1c0%202-1%202-5%202-9%200-8-3-8%2035v34h-11v-12l-3%201-3%201h1c3%200%203%200%203%205%200%208%200%208%207%208h6v15h-6c-1%201%200%201%203%201s3%200%203%202c-1%202%201%205%203%205v-1l-2-3h4v-19h14v-7c0-6%200-6%203-6h2l-4-1c-2%200-3%200-3%205v6h-12V72h12v8h24v-8h11v64h-11v-6c0-6%200-6-3-5-2%201-2%201%200%201s2%200%202%207v6h12v9c0%208%200%209%202%209s2%200%202-2l-1-70V17h-13c-18%201-39%200-39-2s49-2%2049%200c1%201%201%200%201-1%200-2%200-3-1-2a230%20230%200%2001-50%200l-23%201H75V8h48l48%201c1%201%201%200%201-1%200-2%200-3-1-2A2040%202040%200%200121%208m204%2010l-2%201c-1%200-2%200-1%201%202%200%202%2030%200%2030v2c2%200%202%2034%200%2034v1a416%20416%200%20011%2068l2%201%209%201c9%200%209%200%209%203l2%202h6c7%201%2011%200%2011-2s1-3%209-3l9-1v-11l1-9%205-1c6%200%206%200%206-2l-1-19V98h-5l-5-1%205-1h5V86h-5l-6-1c-2-3-4%200-4%206%200%205%200%206-2%205-2%200-2%200%200%201%205%203%205%206-1%206h-3v18l1%206h3c3%200%203%200%203%203v24h-16v3c0%203%200%203-3%203-2%200-2%200-2-2v-3c-1-1-1%200-1%202%200%203%200%203-3%203-2%200-2%200-2-2v-3c-1-1-1%200-1%202%200%203%200%203-2%203-3%200-3%200-3-3v-3h-16v-20h3c4%200%204%200%204-4%200-3%201-3%204-3s4-1%202-3h-1l-3%201c-2%200-3%201-3%204%200%204%200%204-3%204s-3%200-3-3c0-4%200-4%203-4s3%200%203-5v-4l-1%204c0%203%200%204-2%204s-2-1-2-4%200-4%202-4l2-1-2-1c-2%200-2-1-2-4s0-4%202-4%202%201%202%204l1%204%202%202c1%202%201%203%202%202%203-1%206%202%206%205v3l1-1%201-5c0-3%200-3-4-5-5-1-5-1-5-5v-4h15v18h-3l-3%201h7v-10c0-11%200-11-10-11h-7l-1-3c0-4%200-4-3-4s-4-1-4-3%200-2%2014-2h15v-3c0-3%200-3%204-3s5%200%205-2c1-3%200-3-4-3-3%200-3%200-3-2s1-3%202-3c2%200%202-1%202-8%200-8%200-9-2-9l-2-2c0-2%201-3%202-3l2-1%201-1c1%200%202-1%202-3v-2c-1%202-2%202-20%202h-18v-3c0-2%200-2%204-2s5%200%205-2c1-2-1-4-5-4-4%201-4%201-4-3v-3h13V21h-7l-6-1h15v11l1%2013%201-7v-7h10v-4l-1-5v4c0%204%200%204-3%204-4%200-4%200-4-3l1-4c1-1%201-1-1-1-1%200-2%201-2%203-1%203-1%203-1%200l1-4%204-1c4%200%204%200%203%201-2%201-2%202-1%202l2-1c1-2%202-2%206-1h12c6%201%209%203%203%203-2%200-3%201-3%206%200%207%201%208%204%208%201-1%202%200%202%201l-1%201-3%201c-1%201-1%201%201%201%202-1%202%200%202%205l1%2010%201%203h37v-3c0-2%200-3-1-2%200%202-1%202-7%202h-6V45h-19v6l-1%205-1-15%201-15%2010-1c10%200%2010%200%2010-3l1-2%201%205v4h20v-4c0-4%200-5%202-5l1%2013c0%2012%200%2012-2%2012-1%200-2%200-1%201l1%204c0%207%201%209%204%209%202-1%204-2%202-2l-1-4c0-4%200-4%203-4s3%201%203-17V20h5l7-1c1%200%202%200%201%204l1%204%202%202%204%201%203-1%201-2c2%200%203-2%202-5v-2h17v4c0%203%200%203-4%203s-4%200-4%204v3h-17v21h17v8l1-4c0-3%201-4%204-4s3%200%203%203c0%204%200%204-4%204l-3%201h3c4%200%204%200%204%203v3h-38v-2c0-2%200-2-1-1%200%202-1%202-6%202-6%200-7%201-7%203%200%203%201%204%208%203%205%200%205%200%205%203v2l1-4c0-2%200-2%205-2s5%200%205%203l1%204h27v4c0%204%200%204-4%204s-4%200-4%204v3h-8l-5%201c4%200%204%200%204%204s0%204%204%206c4%201%204%202%204%206v4h-8l-7%201h16v4c0%203%200%203%204%203h4v9h-49v-21h3l4-2%201-1%201-1c2-2%201-5-1-7s-2-2-2%204c0%205-1%206-3%206s-3-1-3-6v-6h3l4-1h-7v-6c0-7%200-7%203-7l4-2-2-1-5%202h-3v19h-8l3%201c4%200%204%200%204%205%200%204-1%205-2%203l-3-1c-1%200-2-1-2-4l-1%208v11h4c4%200%205%201%205%203%200%203%200%203-7%203l-14%201-8%201%209%201h19v9c0%209%200%2010%203%2010%202%200%202-1%202-9v-9h6l8-1h8l16%201h10v8l1%209c2%201%202-3%202-68V17h-10a568%20568%200%2001-80%201h-66m-10%202a1653%201653%200%20012%20135c3%200%203%200%202-1-2-1-2-5-2-67s0-66%202-67c1-1%201-1-2-1-2%200-3%200-2%201m-38%201l1%2019-1%2018v1c1%201%202%2035%200%2036l-1%201%201%201c1-1%202%2022%201%2044v16h5c2%200%204%200%203-1l-1-67%201-68c1-1-1-1-4-1-4%200-6%200-5%201m207%200l1%2025-1%2024v2c2%201%201%2036-1%2036v1c2%200%202%202%202%2023l-1%2024c-1%201%200%201%204%201l5-1h-1l-1-67%201-68c1-1-1-1-4-1s-5%200-4%201m-204%201a3626%203626%200%20011%2037c-2%201-2%2035%200%2036v2a476%20476%200%2000-1%2057c0%202%202%202%203%201V23c0-2-3-3-3-1m149%2013v13h5V21h-5v14m57%2010l1%2025v2c-2%201-1%2036%201%2036v1c-2%200-2%202-2%2024%200%2021%200%2023%202%2023%201-1%202-5%202-68%200-66%200-67-2-67s-2%201-2%2024M105%2027c-6%200-7%201-7%203l-2%202c-3%201-3%207%200%208l2%202c1%204%2014%204%2015%200l2-2c3-1%203-7%200-8l-2-2c0-3-2-4-8-3m-4%205c-2%200-2%201-2%204v4h13v-8l-5-1-6%201m253%2013v9h15v-4c0-4%200-4-5-6-4-1-4-1-4-5%201-4%201-4-2-4h-4v10M228%2069c0%2015%200%2016%205%2014%203-1%203-2%203-6l-1-6-2-2%202-3%201-6v-5h-4l-4-1v15M22%2070l1%2014%203-2c2%200%203-9%201-10l-1-4%201-2%201-5c0-6%200-6-3-6h-3v15m98%2033c0%2025%201%2032%202%2033l1-32-1-29-1%203v-3l-1%2028m17-27v3h22v-6h-22v3m214%200v2h27v-5h-27v3M70%2090l-1%207v1c2%200%202%201%202%209s0%209-2%209l-2-2c-1-3-7-3-8%200l-2%202c-2%200-3%201-3%208s0%207%202%207%203%201%203%202l4%202%204-2%202-2c2%200%202%201%202%2013v13H59v-5c0-6%200-6-2-6l-4%201h5v13h16v-21h5c7%200%207%200%207-8%200-5%200-5%203-5h2l-4-1-3-1v12H74v-26c0-25%200-26-2-26s-2%201-2%206m-53%2023l1%2026%201-26-1-26-1%2026m212-24c0%202%200%203%2013%203s14-1%2014-3%200-2-13-2c-14%200-14%200-14%202m-89%208c0%202%200%202%208%202%209%200%2012%202%2011%207v3l1-3%201-4%201%204v3c2-1%202-7%200-8-3%200-6-3-6-5%200-3-6-3-8%200h-1c0-2-1-2-3-2-4%200-4%200-4%203m142%208c0%205%200%205%203%205l3%201h-3c-3%200-3%200-3%205v4h8v-4l-1-5v-1l1-6v-4h-8v5m13%206l-1%204v1l1%205v4h8v-18h-4c-4%200-4%200-4%204M59%20124v6h4c4%200%205%200%204-2h1c2%202%202%202%202-1%200-2%200-3-1-2h-1v-3h1c1%201%201%200%201-1%200-3-1-4-7-4h-4v7m168%2043c0%203%200%205%201%204l75-1%2075%201c1%201%201-1%201-4%200-4%200-5-1-4a230%20230%200%2001-51%200%20230%20230%200%2001-50%200c0%202-49%202-49%200-1-1-1%201-1%204m-156-2c-1%201-47%202-49%201-1-1-2%203-1%207a1361%201361%200%2001151%200c1-4%200-10-1-8a243%20243%200%2001-50%200%20250%20250%200%2001-50%200m157%202c0%202%201%202%2075%202%2070%200%2074-1%2075-2%200-2-2-2-24-2l-25%201h-1l-24-1-25%201h-2l-25-1c-23%200-24%200-24%202m-152%201l-4%201h-1l-24-1c-22%200-25%200-25%202l75%201%2074-1a185%20185%200%2000-50-1c0-1-37-2-45-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2311827956989245,"src":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/30bd0/ground-design.jpg","srcSet":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/1cd47/ground-design.jpg 180w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/0aeec/ground-design.jpg 360w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/30bd0/ground-design.jpg 720w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/2e512/ground-design.jpg 1080w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/3ef90/ground-design.jpg 1245w","srcWebp":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/f1dd6/ground-design.webp","srcSetWebp":"/static/b03f754ddc36b87bcf4b4ccaa71f17fd/5e0c5/ground-design.webp 180w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/c5804/ground-design.webp 360w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/f1dd6/ground-design.webp 720w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/00479/ground-design.webp 1080w,\n/static/b03f754ddc36b87bcf4b4ccaa71f17fd/4ec4b/ground-design.webp 1245w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-2","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"]}}},{"node":{"excerpt":"先看效果演示： 一、为什么要做 在我刚开始入门的时候，当时用  CodeMirror  做了一个前端  Demo  系统，类似  JSFiddle  可以用原生的  html 、 css 、 js  保存展示代码，然后在博客内引入代码和效果，这是代码编辑器的最初版本。后来看到 vscode 的火热，突发奇想想搬到浏览器端，实现真正的云端开发环境。 当时做这个的想法比较初始，还没有现在很多云服务商或者大公司内部提供的在线开发平台，毕竟当时浏览器下虽然有  Eclipse Che ， Cloud9  等方案，但是开发体验确实很差。而现在出现  theia 、 code-server…","id":"362ef756-e712-5e50-b663-d88e9c40a8c8","fields":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第一篇文章，谈谈想法、技术栈、基础核心等。","slug":"/blog/workpad-part-1","date":"2019-12-24"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌋 WebIDE 的开发记录其一（前言和概览）","date":"2019-12-24 10:58:09","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/77247/WorkPad-demo.png 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/375c0/WorkPad-demo.png 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/be9cc/WorkPad-demo.png 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/8c853/WorkPad-demo.png 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3e134/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/5e0c5/WorkPad-demo.webp 180w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/c5804/WorkPad-demo.webp 360w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/f1dd6/WorkPad-demo.webp 720w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/00479/WorkPad-demo.webp 1080w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/6ebce/WorkPad-demo.webp 1374w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"workpad-part-1","categories":["webide"],"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]}}},{"node":{"excerpt":"想分享的是现代前端复杂的工程化方案，其中需要的各种配置文件，应该没有几个文件没见过吧~\n每次新技术、新需求来临，大呼学不动了的你，看到这些又要披上战甲、拿起键盘冲啊!!! 下面的表格是按照自己几个项目里面用到的一些方案的文件，也算是目前常见的一些了，具体基本上根据文件名就能看出是什么的配置了： name tech desc package.json npm node 包的配置，现在发展为前端通用的项目配置文件 .eslint.json / .eslint.js / .eslintrc / .eslintrc.js ESlint 语法、问题、风格检查和自动修复 .lintstagedrc…","id":"bd5bc321-fdda-5ed6-b08b-71974372143b","fields":{"title":"🔰 前端编辑器常见配置文件","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","slug":"/blog/config-files","date":"2019-11-27"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔰 前端编辑器常见配置文件","date":"2019-11-27 01:17:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"config-files","categories":["code"],"tags":["前端","整理"]}}},{"node":{"excerpt":"1. 可推断编程的体验 真正的面向接口编程，更自然完备的模块和逻辑抽象，让前端开发的思维方式从怎么实现结果，变成了更高质量的需求交付，去思考接口的输入输出，去设计模块和代码，更何况仅仅是代码提示和对接联调就足够让你爽翻天了。 复杂模块之间的集成从来不是那么顺利，功能的升级重构、项目的交接一直是开发很重要的一部分，这块经常会出现问题，因为并不是每个人、每次都能清楚的记住项目的接口、参数、类型等，这块出现的错误在前端占了很大一个比例，所以很多的测试才能覆盖这块的质量保证。可是，这对于静态语言其实并不是问题。 之前的前端代码提示依赖于 document…","id":"d0d2f052-390f-57da-80c8-a426a86d8810","fields":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","slug":"/blog/typescript","date":"2019-11-21"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","date":"2019-11-21 11:47:10","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='154'%3e%3cpath%20d='M0%2077v77h401V0H0v77m119-17l4%201h4v13l1%2013c2%200%202-2%202-13l1-12%204-1c3%200%204-1%204-2l-10-1c-8%200-10%200-10%202m79%200c-4%205-3%209%206%2014%205%204%206%207%203%209-2%202-8%202-10%200-1-1-1-1-1%201%201%206%2014%204%2016-1%201-5-1-8-7-12s-7-5-5-8c1-2%202-2%206-2%204%201%205%200%205-1%200-3-9-3-13%200m76%201l-1%202c0%202-1%203-2%203l-2%202%202%201c2%200%202%201%202%208s0%208%202%2010c3%201%206%201%206-2h-1c-2%201-4-2-4-9s0-7%203-7l2-2-2-1c-2%200-3%200-3-3%200-1-1-3-2-2m-141%206l4%2010c4%2011%203%2017-2%2017l-2%202c0%202%204%201%206-1%203-3%2013-28%2012-29-2-1-3%201-6%2010l-3%206a338%20338%200%2001-7-16l-2%201m21%2015c0%2013%200%2015%202%2015l1-6%201-6%203%202c8%204%2015-8%2011-17-3-4-9-6-12-2l-2%201-1-1-1-2c-2%200-2%202-2%2016m25-14c-6%205-5%2016%202%2019%204%202%2011%200%2011-3h-2c-5%202-11%200-11-4%200-2%201-2%207-2h7v-4c-1-7-8-10-14-6m39%201c-6%205-4%2017%204%2018%203%201%208%200%208-3h-2c-5%203-10-1-10-7s3-8%208-8c3%201%204%201%204-1-1-3-8-3-12%201m32%2013c0%2013%200%2015%202%2015l1-6v-6l3%202c4%201%207%201%2010-3%204-3%204-12%200-15-3-3-8-4-10-1l-2%201-1-1-1-2c-2%200-2%202-2%2016m-90-11c-5%204-3%2014%203%2014%205%200%209-10%205-14-2-2-6-2-8%200m96-1c-3%202-4%2010-1%2013%204%204%2010%201%2010-6s-4-10-9-7'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.6,"src":"/static/dee044e1845238d1a65fdad7a74d6b22/be9cc/typescript.png","srcSet":"/static/dee044e1845238d1a65fdad7a74d6b22/77247/typescript.png 180w,\n/static/dee044e1845238d1a65fdad7a74d6b22/375c0/typescript.png 360w,\n/static/dee044e1845238d1a65fdad7a74d6b22/be9cc/typescript.png 720w,\n/static/dee044e1845238d1a65fdad7a74d6b22/702b6/typescript.png 832w","srcWebp":"/static/dee044e1845238d1a65fdad7a74d6b22/f1dd6/typescript.webp","srcSetWebp":"/static/dee044e1845238d1a65fdad7a74d6b22/5e0c5/typescript.webp 180w,\n/static/dee044e1845238d1a65fdad7a74d6b22/c5804/typescript.webp 360w,\n/static/dee044e1845238d1a65fdad7a74d6b22/f1dd6/typescript.webp 720w,\n/static/dee044e1845238d1a65fdad7a74d6b22/93652/typescript.webp 832w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"typescript","categories":["code"],"tags":["整理","TypeScript","TS","前端"]}}},{"node":{"excerpt":"想分享的是让你知道 ESLint 的简单背景和用法，以及知道 ESLint 怎么在项目中发挥作用的。 1. ESlint 是个什么 顾名思义  ECMAScript Linter  就是一个 ES 规范的检查器，负责检查代码语法/风格/错误。 在天地初开之时，JS 依靠语法宽松、动态运行的特点更容易低门槛实现业务获得青睐，但也是因此很多语法和逻辑错误无法在静态检查阶段被发现，于是 JSLint 语法检查器出世，能够满足基本的代码静态检查需求，但是扩展性差几乎不可配置，后来在此基础上又 fork 出了 JSHint，很长时间内这两个工具和相关生态支持了最开始的代码检查需求，毕竟当事的 ES…","id":"35cce3eb-69c1-5c43-b940-6dd9198359ee","fields":{"title":"🚑 Eslint 周边","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","slug":"/blog/eslint","date":"2019-11-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚑 Eslint 周边","date":"2019-11-18 23:31:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"eslint","categories":["code"],"tags":["ESLint","前端","最佳实践"]}}},{"node":{"excerpt":"想分享的是让你知道  flutter  是一个非常不错的跨端解决方案，在开发效率、编程体验、表现力、流畅等方面表现很好，能够承载出色的产品的实现。但是如果你们的生产环境要求比较严格、需求有些极致，还是有很多问题要注意的，不过技术本身的发展趋势还是很值得期待的。 〇、flutter 是什么? flutter  按照官方的定义是一个高性能、一致性的跨端 app SDK，关键词有跨平台、快速、高质量、漂亮、响应式，目标是构建出跨端的高性能应用。 Flutter is an app SDK for building high-performance, high-fidelity apps for…","id":"bbc7ba09-87e9-5f54-9e3a-9fb05f28af66","fields":{"title":"🎨 使用 flutter 构建移动端 App","description":"flutter 已经不算是新生的事物了，毫无疑问是一个非常优秀、很有前景的技术栈，但是并不能说生产环境里这个一个多么低门槛的完美解决方案。","slug":"/blog/flutter","date":"2019-11-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎨 使用 flutter 构建移动端 App","date":"2019-11-10 16:22:11","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3e%3cpath%20d='M235%201l26%2016%2026%2015v9l-20-11-20-12-9%205-9%206-1%2023v24l-34-20-33-19-1%204v4l24%2014%2024%2014v14l-4-2-3-2v4c0%204%202%205-22-9l-19-11-26%2016-28%2016a2065%202065%200%2000120%200l-6-4c-5-2-7-4-6-4h3l6%205c7%204%207%204%2016%204l9-1c-2-2-23-13-25-12-4%201%203-3%2040-24%2035-21%2039-23%2041-22%203%203%2056%2033%2057%2033s-8%206-20%2012l-22%2013%2040%201h41V0H279l-7%204-6%204-8-4c-6-4-7-4-15-4l-8%201M20%2019l-7%207%202%202c2%201%202%201%2011-7l8-9h-4c-3%200-4%201-10%207m3%209l-4%203%204%204c3%203%204%204%207%204%205%200%205%200%201-5l-3-3%203-3%203-4h-3c-3%200-5%201-8%204m184%2013l-5%203%2018%2011-8-17-5%203'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.9900249376558605,"src":"/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png","srcSet":"/static/b5540b62e5e351560b4a55e1a7a78026/77247/banner.png 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/375c0/banner.png 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/be9cc/banner.png 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/8c853/banner.png 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/43380/banner.png 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/ab3db/banner.png 1600w","srcWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp","srcSetWebp":"/static/b5540b62e5e351560b4a55e1a7a78026/5e0c5/banner.webp 180w,\n/static/b5540b62e5e351560b4a55e1a7a78026/c5804/banner.webp 360w,\n/static/b5540b62e5e351560b4a55e1a7a78026/f1dd6/banner.webp 720w,\n/static/b5540b62e5e351560b4a55e1a7a78026/00479/banner.webp 1080w,\n/static/b5540b62e5e351560b4a55e1a7a78026/aa813/banner.webp 1440w,\n/static/b5540b62e5e351560b4a55e1a7a78026/2e3ee/banner.webp 1600w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"flutter","categories":["code"],"tags":["整理","思考","flutter"]}}},{"node":{"excerpt":"…","id":"f5188044-78fa-51c9-b732-80dc5f1219aa","fields":{"title":"🔐 数据结构和算法 [ONGOING]","description":"数据结构对于一个程序员是一个基本功，出身计算机科学的肯定会接触过。算法也不用说，常见的算法思想对于业务和能力的提升是显而易见的，至少解决问题的能力建立在熟悉常见数据结构和常见算法的基础上。数据结构和算法是在 IT 行业想有精进的最基础的能力，日常业务、数据处理和算法都必须知道这些，必须好好打扎实这个基础。","slug":"/blog/data-structure-algorithm","date":"2019-10-29"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🔐 数据结构和算法 [ONGOING]","date":"2019-10-29 11:45:48","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='89'%3e%3cpath%20d='M0%2045v44h401V0H0v45m203-32c-2%200-3%201-3%202h-10l-5%203h-2l-4-1-5%202c-4%200-4%2012%200%2013%202%201%202%203-1%203-2%200-2%201-2%206%200%206%200%206%203%207l3%201-3%201c-2%201-3%201-3%206%200%206%200%206%203%208%205%203%205%203%205-4%200-5%200-6%202-6l1%201-1%206c0%206%201%207%204%208l4%202v-6c0-6%201-7%205-7l-1%201c-2%201-2%202-2%207v6l4%202%205%202V63l4-1%204-1v4c0%203%201%204%202%205%204%202%204%201%205-5%200-6%200-6%204-6%203-1%203-1%203%202s1%204%202%205c3%202%204%201%204-4v-6l4-1%205-2-3-1-5-1c-1%201-1-1-1-5v-7l4-1%204-1-4-1c-3-1-3-1-3-7%200-5%201-6%203-6%207-1%204-4-4-4l-3-1c1-1-7-3-8-3l-2-1c-2-1-8-2-12-1m16%2013c-4%201-5%204-4%2010%200%202%205%204%205%202l3-1c2-1%203-1%202-2h-1l-1-5v-4h-4m-15%203l-4%201v6c0%205%200%206%202%206h4c0-1%201-2%203-2%202-1%202-1%201-2s-2-2-2-5c1-5%201-5-4-4m14%2013h-3l-1%206c0%208%201%209%206%206%203-2%204-2%203-8%200-5-1-6-5-4m-15%203l-4%201v7c0%207%200%207%206%205l4-1v-6c0-7%200-7-6-6'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.4884318766066835,"src":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/30bd0/banner.jpg","srcSet":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/1cd47/banner.jpg 180w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/0aeec/banner.jpg 360w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/30bd0/banner.jpg 720w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/2e512/banner.jpg 1080w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/28df3/banner.jpg 1440w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/6f751/banner.jpg 1746w","srcWebp":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/f1dd6/banner.webp","srcSetWebp":"/static/29aecd508bd3b3fd63c1ecba6cea6f1e/5e0c5/banner.webp 180w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/c5804/banner.webp 360w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/f1dd6/banner.webp 720w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/00479/banner.webp 1080w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/aa813/banner.webp 1440w,\n/static/29aecd508bd3b3fd63c1ecba6cea6f1e/c8d64/banner.webp 1746w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"data-structure-algorithm","categories":["algorithm"],"tags":["算法","整理","思考"]}}},{"node":{"excerpt":"想分享的是 Babel 这个工具的流程和最佳实践，平时开发必不可少 Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. 太长不看请到： 最佳实践 1. Babel 简单讲是什么？ Babel  面世的环境是  ES  标准的推进和浏览器标准缓慢实现的时候，天下苦  ES5  久矣， Babel…","id":"de5b076e-9374-53fa-9af8-86c2604be3d4","fields":{"title":"💡 Babel 再理解和最佳实践","description":"现代前端技术发展的奠基石 Babel，一个神奇的存在，现代前端、工程化必不可少的一块拼图，简单梳理下体系和目前的最佳实践。","slug":"/blog/babel-understanding","date":"2019-10-21"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"💡 Babel 再理解和最佳实践","date":"2019-10-21 13:54:13","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='99'%3e%3cpath%20d='M0%2050v49h401V0H0v50m101-25c0%208%200%209%202%2010l2-1h3c4%202%207-1%207-6s-3-8-7-6c-3%201-3%201-3-3%200-2%200-3-2-3s-2%201-2%209m-33%201v9h6l7-2V23c1-4-1-6-8-6h-5v9m135%200l-1%2010c-3%201-2%203%200%203%205%200%206-2%206-13%200-9%200-9-2-9-3%200-3%200-3%209m57-7c-1%201-2%203-1%204%201%202%201%203%206%205%202%200%203%201%203%202s-4%202-6%201c-4-1-5%201-2%203%204%203%2012%200%2012-5%200-3-2-5-6-6-5-1-4-3%201-3l4-1c0-3-9-3-11%200M87%2022c-2%201-1%203%202%202l4%201c1%201%200%201-2%201-4%200-7%203-6%206s4%203%206%202h3l2%201c3-1%203-9%200-12-2-2-8-3-9-1m32%201c-6%206%201%2014%209%2012%204-2%202-4-2-4l-5-1%205-1c4%200%205%200%205-2%200-3-4-6-7-6l-5%202m39-1c-3%202-1%206%203%207s4%203-1%203c-2-1-3%200-3%201l4%202c8%200%2010-7%203-8-4-1-4-3%201-3h3c0-3-7-4-10-2m23%200c-2%201-1%203%202%202l4%201c1%201%200%201-2%201-3%200-6%202-6%204%200%204%203%206%206%204h3l2%201c3-1%203-10%200-12-2-2-6-2-9-1m32%200c-2%201-1%203%202%202l4%201c1%201%200%201-2%201-3%200-6%202-6%204%200%204%203%206%206%204h3l2%201c3-1%203-10%200-12-2-2-8-3-9-1m31%200c-3%201-1%203%203%202l4%201-3%201c-4%200-6%202-6%205%201%203%205%205%207%203h2l3%201c2%200%202-12-1-13h-9m64%208c0%208%200%209%202%209s2-1%202-3c0-3%200-3%201-2%205%205%2012-5%207-11-2-2-2-2-5-1h-3l-2-1c-2%200-2%201-2%209M133%2046l-1%202-1%202%201%201%201%203%202%205c2%202%206%203%206%201l-1-2c-4%200-3-6%200-7%203%200%203-3%200-3l-3-2-2-2-2%202m24%202l-2%202h2c5-1%207%201%203%202-9%203-8%209%202%209h6v-5c0-7-4-10-11-8m21%200h-7v6c0%206%200%207%202%207s2-1%202-4c0-4%203-8%204-6l1%205c0%204%201%205%203%205s2-11%200-13h-5m12%200c-2%200-4%204-3%206l5%202c4%200%204%202-1%202l-4%201c1%202%2010%202%2011%200%202-3%200-5-4-6s-4-3%201-3h3c0-2-4-3-8-2m18%200h-6v9c0%208%200%209%202%209s2-1%202-3c0-3%200-3%203-2%202%200%204%200%205-2%205-4%200-15-6-11m29%200c-3%202-4%209-1%2011%202%203%2010%202%2011%200l-4-1c-3%200-4-1-5-2l5-1c5%200%205%200%204-2-1-5-5-7-10-5'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.026845637583893,"src":"/static/05c5a5df4b2675749b7cad753bb8726b/9429d/banner.jpg","srcSet":"/static/05c5a5df4b2675749b7cad753bb8726b/1cd47/banner.jpg 180w,\n/static/05c5a5df4b2675749b7cad753bb8726b/0aeec/banner.jpg 360w,\n/static/05c5a5df4b2675749b7cad753bb8726b/9429d/banner.jpg 600w","srcWebp":"/static/05c5a5df4b2675749b7cad753bb8726b/fabdf/banner.webp","srcSetWebp":"/static/05c5a5df4b2675749b7cad753bb8726b/5e0c5/banner.webp 180w,\n/static/05c5a5df4b2675749b7cad753bb8726b/c5804/banner.webp 360w,\n/static/05c5a5df4b2675749b7cad753bb8726b/fabdf/banner.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"slug":"babel-understanding","categories":["code"],"tags":["babel","ES6","polyfill","最佳实践","前端"]}}},{"node":{"excerpt":"想让读者了解的事情 在阅读这篇关于 ES Class 的文章前，希望你能理解： Class 是语法糖  - ES Class 本质上是 prototype 的语法糖，不是全新的概念 执行环境的差异  - 不同环境下 Class 的表现可能有所不同 继承机制的本质  - 理解原型链和构造函数的执行顺序 静态 vs 实例  - 明确静态方法和实例方法的区别和使用场景 私有成员的重要性  - 私有字段和方法如何提升代码安全性 TypeScript 的增强  - TS 在 Class 上增加了类型注解、访问修饰符、抽象类等能力，但最终编译产物还\n是 ES Class 想分享的是让你知道 ES…","id":"7a84bc76-ba53-5e16-a1bc-e584aac14ed6","fields":{"title":"🚑 ES Class 相关","description":"ES 的很多标准 ES6、ES7 甚至草案阶段的实现，加上 TS 等的实现，有时候会让人蒙圈。今天用到了 Class，相关的概念先梳理下。","slug":"/blog/es-class","date":"2019-10-20"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚑 ES Class 相关","date":"2019-10-20 14:35:15","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"es-class","categories":["code"],"tags":["ESLint","前端","TypeScript","最佳实践"]}}},{"node":{"excerpt":"想分享的是自己对全栈的想法，从自豪的自称为全栈，到现在懂得术业有专攻，全栈是个职业，不能随便叫自己全栈开发工程师，对职业本身负责，能力广泛、兴趣宽广、懂得很多，也只能是我自己项目的全栈工程师。 Just do whatever it takes to make it work…","id":"e4929f26-4432-5ad2-a704-a0f176aa00a6","fields":{"title":"🚀 全栈=全干","description":"全栈=全干，一个在前后端都有生产能力、各类技术都有涉猎的工种，一般顶着这个头衔表示团队多面手、救火队员、项目全包的瑞士军刀，在一线岗位发扬不怕苦不怕累、哪里需要哪里搬的精神，广受小公司、创业公司的欢迎。","slug":"/blog/full-stack","date":"2019-09-28"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚀 全栈=全干","date":"2019-09-28 09:39:01","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"full-stack","categories":["code"],"tags":["思考","协作","技巧"]}}},{"node":{"excerpt":"想分享的是对 React-Hooks 这个新功能的思考，不仅仅是新的接口，重要的是这种开发模式代表的逻辑的拆分，状态和副作用的思维方式，而不是生命周期~~ Hooks 概念刚出来的时候就看了发布会的 Presentation，当时感觉思想特别好，能够在一个函数里面就可以对数据和生命周期进行管理。 而且对于从 prototype 过来的原型继承，一直觉得虽然 Class 很好用，但是太重量了，一个很简单的组件只要涉及到内部状态就要有 Class，所以 Hooks 发布之后很长一段时间我都是以为要替代 Class 组件，至少大部分场景可以用 Hooks…","id":"d96d11a2-0488-56a8-9113-753a97f12f03","fields":{"title":"⚓ React Hooks 理解","description":"hooks 的思想是开发者不再需要去理清每一个生命周期函数的触发时机，以及在里面处理逻辑会有哪些影响。而是更关注去思考哪些是状态，哪些是副作用，哪些是需要缓存的复杂计算和不必要的渲染。class 更偏向的是清晰完整的生命周期，一个经典的面向对象思想，强调的是方法和属性。","slug":"/blog/react-hooks-vs-class","date":"2019-09-18"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"⚓ React Hooks 理解","date":"2019-09-18 20:24:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='117'%3e%3cpath%20d='M0%2059v58h401V0H0v59m206-26c-6%204-21%2024-20%2026l14-8-2-2-2-2%2013-13c7-3%2010%202%208%2012l-1%207c2%201%203-1%204-7%203-14-4-20-14-13m1%2014c0%203%200%2015%202%2014h2c4-1%209%2018%206%2022-3%203-8%202-14-4-4-4-6-5-6-3%200%203%2012%2011%2016%2011%2010%200%2010-14%201-31-4-9-6-11-7-9m-28%202c-14%206-13%2015%201%2020%206%202%2028%204%2028%202l-13-7-1%203c0%202-1%203-9%200-17-4-18-12-1-16l4-2c1-2-4-2-9%200'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.4265734265734267,"src":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/30bd0/banner.jpg","srcSet":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/1cd47/banner.jpg 180w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/0aeec/banner.jpg 360w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/30bd0/banner.jpg 720w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/83502/banner.jpg 980w","srcWebp":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/f1dd6/banner.webp","srcSetWebp":"/static/01f96153bdd5c8bda1b12a6a5ec91e8e/5e0c5/banner.webp 180w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/c5804/banner.webp 360w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/f1dd6/banner.webp 720w,\n/static/01f96153bdd5c8bda1b12a6a5ec91e8e/74ae0/banner.webp 980w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"react-hooks-vs-class","categories":["code"],"tags":["react","hooks","技巧","思考","功能"]}}},{"node":{"excerpt":"想分享的是自己在团队内推行的一个项目说明，尤其是多项目切换和多人协作的工作环境。 1. 咋想的 项目的声明周期包括初始化、开发、迭代、部署、交接等，一个维护良好的项目的这些流程不可能随意混乱。在 git 仓库托管大部分项目的背景下，readme 一般作为一个 work board 角色，标记每个重要的说明。从我目前的工作中，聊聊怎么才能较好的维护一份产品文档，不至于快速上手两年前的老旧服务，不至于离职一周搞不定交接。 一个产品文档的详细程度与复杂程度、涉及人数、重要性、相关联度有关系，简单的一个项目也不需要长篇累牍的说个没完，实现和逻辑都放到代码里，文档是作为一个说明书存在。…","id":"2434c3dc-a8ef-5e9a-bf85-7ee3504df40b","fields":{"title":"📒 项目说明怎么写 - Readme 的自我修养","description":"项目的门面，项目的第一眼，交接的核心，质量的基础，沉淀和总结的关键，写好一个 ReadMe 是一个程序员的基本要求。","slug":"/blog/project-readme","date":"2019-09-10"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"📒 项目说明怎么写 - Readme 的自我修养","date":"2019-09-10 20:06:21","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"project-readme","categories":["code"],"tags":["技巧","最佳实践","协作"]}}},{"node":{"excerpt":"写代码的时候不能不知其所以然，在现在工程化程度特别高的时代，很多配置都有十分成熟的脚手架工具，一行代码开箱即用的体验。但是这些东西都是辅助的工具箱，我们即将秃顶的艺术家更需要注重基础，不然很多时候项目报错都会让自己不知所措，或者会出现“明明自己弄得没错怎么还是没法运行，一阵鼓捣后有莫名其妙成功运行的奇妙过程”。而应接不暇的工具和框架就像是时代的洪流，你唯一能追的上的是自己解决问题的能力。 谁还记得当前 CMD, AMD, Commonjs 还有说不清楚的依赖处理和文件引入而出现的很多标准和实现。现在初学者小年轻上手就是 Vue，React…","id":"78770404-d59b-5014-aa22-7b996074ae36","fields":{"title":"🎁 import 还是 require","description":"webpack、node.js、ES5 的模块引用是不一样的，本文了解一下模块化的一些东西，重点说明不同的代码组织方式。","slug":"/blog/import-or-require","date":"2019-09-03"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🎁 import 还是 require","date":"2019-09-03 16:34:10","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2046v46h401V0H0v46m238-30l-1%203-1%203v2l1%205c0%207%205%2011%208%207%201-2%200-3-2-3-3%200-3-8%200-9l1-2-1-1-2-2c0-3-1-4-3-3m-28%205c-7%202-6%2014%201%2015%207%202%2013-6%208-12-2-3-5-4-9-3m-49%201c-1%201%200%2013%201%2014%202%202%204-2%204-7%200-3%201-4%202-5%202%200%202%200%202%206%200%209%205%2010%205%200%200-4%200-5%202-6s2%201%203%207c0%204%201%206%202%206%202%200%203-12%201-14-1-2-20-2-22-1m27%2010l1%2010c1%202%203-1%203-4s0-3%202-2c6%203%2012-6%207-13-1-2-2-2-7-2h-6v11m-24%2024c-6%204-2%2014%205%2014%204%200%207-2%207-4h-3c-2%202-6%201-7-1s-1-2%204-2%206-1%206-3c0-5-7-8-12-4m17%200c-3%202-3%209-1%2012%203%202%207%203%209%201l1%203%202%204c1%200%202-2%202-10%200-11-1-13-3-11h-2c-2-2-6-1-8%201m17%200c-3%207%201%2016%207%2013h4c2%202%202%201%202-9%200-8-2-9-3-1-1%2010-7%2010-7%200%200-5-2-7-3-3m41-1c-4%203-4%2011%200%2014%203%202%2011%201%2011-3h-4c-1%202-5%201-6-1%200-2%201-2%205-2%205%200%205%200%205-3%200-5-7-8-11-5'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.368932038834951,"src":"/static/d432bed0d654bf430d905eac915ebeb9/30bd0/banner.jpg","srcSet":"/static/d432bed0d654bf430d905eac915ebeb9/1cd47/banner.jpg 180w,\n/static/d432bed0d654bf430d905eac915ebeb9/0aeec/banner.jpg 360w,\n/static/d432bed0d654bf430d905eac915ebeb9/30bd0/banner.jpg 720w,\n/static/d432bed0d654bf430d905eac915ebeb9/93ebb/banner.jpg 900w","srcWebp":"/static/d432bed0d654bf430d905eac915ebeb9/f1dd6/banner.webp","srcSetWebp":"/static/d432bed0d654bf430d905eac915ebeb9/5e0c5/banner.webp 180w,\n/static/d432bed0d654bf430d905eac915ebeb9/c5804/banner.webp 360w,\n/static/d432bed0d654bf430d905eac915ebeb9/f1dd6/banner.webp 720w,\n/static/d432bed0d654bf430d905eac915ebeb9/402ed/banner.webp 900w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"import-or-require","categories":["code"],"tags":["整理","思考","模块","import","require","CMD","AMD","Webpack","ES5","ES6"]}}},{"node":{"excerpt":"1. TwoPointers 双指针 双指针在算法中很常见的一个处理技巧，当然并不是说双指针是一个固定的银弹，只是很多的算法中会使用到两个指针来实现一个更好的算法复杂度。 一般在业务中，如果性能要求没那么变态的场景，基本上一个指针遍历，不行就两个循环，总能解决一般业务。 但是在大数据比如一个超大的数组，遍历一遍的代价已经很大了，能一遍解决最好，所以双指针可能在算法复杂度上更优。 这篇文章也是意识到这样一个方法比较好，目前还并不能总结出一个特别明显的模式，毕竟每个算法的需求不同。 2. 常见的算法场景 LeetCode 数组中有很多简单题目使用这个方法，所以应该比较容易想到。 2.1 《97…","id":"cde50943-277c-50d3-8fec-e85dd49933c4","fields":{"title":"😜 算法双指针","description":"算法中又一个比较常见的双指针方法，这篇文章来思考下那些场景用的比较多。","slug":"/blog/two-pointers","date":"2019-08-25"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😜 算法双指针","date":"2019-08-25 21:34:51","banner":null,"slug":"two-pointers","categories":["algorithm"],"tags":["算法","技巧"]}}},{"node":{"excerpt":"很常见的一个 Leet-Code 问题，取出无序数组的最大 K 个数，比如【前-k-个高频元素】【数组中的第k个最大元素】。 下面以【前-k-个高频元素】为例写下思考： 方法一：排序截取 最容易想到的一个方法，选最大的，那就从大到小排序后截取前 K 个呗。 这个算法的复杂度主要是排序部分，快排的话平均可以有 O(nlog 2 n)，加上截取部分的复杂度  O(K) 。这样的一个处理方式很简单，但是直觉上就可以认为不是很好的方法，因为大于 k 值的元素不需要比较排序，例如  k =…","id":"4d20154a-7beb-5e1e-919e-109f5d3212b8","fields":{"title":"😋 最大的 K 元素","description":"Leet-Code 中常见的一个技巧。","slug":"/blog/bigger-k","date":"2019-08-21"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😋 最大的 K 元素","date":"2019-08-21 19:54:09","banner":null,"slug":"bigger-k","categories":["algorithm"],"tags":["算法","leet-code"]}}},{"node":{"excerpt":"想分享的是一次哭笑不得的 debug 寻找记~，不是最傻的一次调试精力，但是找到问题最想摔键盘的一次，必须复盘下~~ 记录一次最失败的 debug 过程。 国庆 7 天长假回家归来后就遇到很多烦心事，好不容易来到心爱的工位前，打开电源，擦拭键盘，打开项目，启动开发环境....  飘红了~~  大意是找不到某个支持库，放到我现在马后炮就是两下鼠标的问题，当时却是一场疯狂的 debug 过程。现在总结下来犯了很多不应该的错误： 一、 问题复盘…","id":"d307ef63-3c14-5316-8266-9ca8976cb97f","fields":{"title":"🐛 记录一次最失败的 debug 过程","description":"出现 bug 非常正常，但是 Debug 的过程中切忌浮躁、自以为是、胡乱猜测，其实你以为的并不对，反而让你一次一次的忽视简单的问题线索。","slug":"/blog/worst-debug","date":"2019-08-13"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🐛 记录一次最失败的 debug 过程","date":"2019-08-13 12:04:51","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='103'%3e%3cpath%20d='M246%201l-1%202c2%206%202%2014%201%2014-2%200-3-6-2-8%201-3-1-2-2%201l-2%201h-2l-2%202-4%205c-2%204-4%207-4%205l-1%201c-1%202-2%202-6%202-5%200-5%200-4-3v-2l-1%202-2%202-1%201c2%202-2%201-5-1l-2-3c1-1-1-6-2-8-3-2-9-1-9%203l-1%201c-1%200-8-10-8-12-1-2-3-4-5-3v5c3%200%207%209%209%2015l1%205h-27l-2-1c-2%200-7%205-6%205l-4%201-5%201-2-1%202-1h-5l-8%201h-3l-4-1-3-1h-1c-1%201-7%202-34%201H63c-12%203-27%204-28%203h-3l-3%201c-2%200-2%200-1-1%202-1%202-1%201-2-3-3-5-2-6%200v2l2%201-18%203H0v64h401V65a425%20425%200%2000-3-37v4h-9c-6-1-8-2-8-3%200-3-3-9-5-13l-5-10-1-6h-60c-52%200-60%200-60%202v1l-1-1c-1-2-2-2-3-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.867069486404834,"src":"/static/682eb074669535f65148587fab97baa0/30bd0/banner.jpg","srcSet":"/static/682eb074669535f65148587fab97baa0/1cd47/banner.jpg 180w,\n/static/682eb074669535f65148587fab97baa0/0aeec/banner.jpg 360w,\n/static/682eb074669535f65148587fab97baa0/30bd0/banner.jpg 720w,\n/static/682eb074669535f65148587fab97baa0/2e512/banner.jpg 1080w,\n/static/682eb074669535f65148587fab97baa0/424ae/banner.jpg 1280w","srcWebp":"/static/682eb074669535f65148587fab97baa0/f1dd6/banner.webp","srcSetWebp":"/static/682eb074669535f65148587fab97baa0/5e0c5/banner.webp 180w,\n/static/682eb074669535f65148587fab97baa0/c5804/banner.webp 360w,\n/static/682eb074669535f65148587fab97baa0/f1dd6/banner.webp 720w,\n/static/682eb074669535f65148587fab97baa0/00479/banner.webp 1080w,\n/static/682eb074669535f65148587fab97baa0/0c6c7/banner.webp 1280w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"worst-debug","categories":["code"],"tags":["思考","调试"]}}},{"node":{"excerpt":"想分享的是看到经验不足的开发刚入门时，会遇到的一些问题，能看到经验这个东西是也并不是摸不着，踩的坑多了经验就来了~~ 并不是一个很老道、很有经验或者很厉害的开发，但是遇到了很多自己之前犯过的问题。虽然公司项目不大，但是也带了不少实习生，几乎都是初学者，遇到很多编程新手会犯的问题，很多时候经验真的是很重要。更多的时候因为没经验，很多简单的概念或者调试过程就会耽误很多精力，别人的一个小时任务，在很多细节上浪费时间，造成效率低下。 ps: 新手指的是编程刚入门，在没有完整需求说明或者技术栈不熟悉的背景下，而不仅限于工作年限少，很多小项目没有全面的需求文档，还直接面向 c…","id":"2a40922f-a2a5-561a-852a-dfd6aef75549","fields":{"title":"🖐 编程新手问题","description":"带了一些实习生之后发现编程初学者和老鸟的区别，很多时候经验真的是很重要，在此记录下这些不同","slug":"/blog/coding-badcase","date":"2019-08-06"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🖐 编程新手问题","date":"2019-08-06 19:14:03","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='104'%3e%3cpath%20d='M0%2052v52h401V0H0v52m129-26l2%203c1%201%201%201-2%201s-5%202-3%203l2%203c1%203%201%203-1%203l-2%202%209%201h9v11l-3-2c-4-2-4-3%200-3l2-1-2-1-3-1-2-2c-2%200-3%201-3%202l-4%201-3%201%203%201c3%200%203%202-1%207s-2%207%202%202l3-2v3c0%204%200%204%203%204%202%200%202%200%202-4s0-4%202-3c1%202%202%202%202%201v6c3%200%206-7%207-14%202-10%203-9%203%204v10h6V52c0-9%200-11%202-11l1-1c0-2-1-2-5-2-6%200-6%200-6-3%200-2%200-3%202-3l5-1%204-1-2-2c-2-2-2-2-5-1l-7%202c-3%200-3%200-3%205%200%204%200%205-2%205s-3-1-1-3v-3l2-1c0-1-1-2-3-2l-3-1c1-2-6-4-7-3m60%201l-13%202-9%203%206%201c6%200%206%200%206%202s-1%202-6%202c-8%201-8%203%200%203h6v6h-7c-6%200-7%200-7%202l7%201h7v5c0%204%200%204-3%204-7%200-5%203%202%205%205%200%208-2%208-9v-5h7c9-1%2010-3%200-3h-7v-3c0-3%200-3%206-3l5-1c0-2-1-2-5-2-6%200-6%200-6-2%200-3%201-3%205-4%205%200%206-1%203-4-1-2-2-2-5%200m59%202l-3%2011c-2%207-2%208%200%206%202-1%202%200%202%208%200%209%200%209%202%209s3-1%203-15l1-15v12c0%2012%200%2013%202%2013s2-1%202-6%200-7%201-6l5-2c7-3%207-2%201%201-4%203-6%205-4%205%201%201%206-1%209-3%202-3%203-3%205-2%204%201%205%201%205-2%201-1%200-2-4-3l-4-1%202-4%204-3%201-1c0-2-1-2-6-2-6%200-7%200-6-1%200-2%200-2-2-2s-3%201-5%205c-1%204-2%205-2%203s-1-2-2-2c-2%201-2%200-1-2%200-3%200-4-2-4-3-1-3%200-4%203m-21%202l-4%2011-3%206-1-8v-7h-6v21l-4%203-4%202v2h5c2-2%204-2%204-1%202%202%2016%201%2017-1%202-1%202-5%201-8-1-4-3-4-3%201%200%203-1%204-4%204-6%200-7-1-3-5s8-11%2011-18c1-5%201-5-2-5-2-1-3-1-4%203'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.861003861003861,"src":"/static/0ce7448fa1bdb466c91825cc26f6adbd/be9cc/banner.png","srcSet":"/static/0ce7448fa1bdb466c91825cc26f6adbd/77247/banner.png 180w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/375c0/banner.png 360w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/be9cc/banner.png 720w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/5ca29/banner.png 1000w","srcWebp":"/static/0ce7448fa1bdb466c91825cc26f6adbd/f1dd6/banner.webp","srcSetWebp":"/static/0ce7448fa1bdb466c91825cc26f6adbd/5e0c5/banner.webp 180w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/c5804/banner.webp 360w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/f1dd6/banner.webp 720w,\n/static/0ce7448fa1bdb466c91825cc26f6adbd/7e926/banner.webp 1000w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"coding-badcase","categories":["code"],"tags":["思考","协作","skills"]}}},{"node":{"excerpt":"1. Reduce js 中一般很少用（至少之前我很少用到）的一个内置函数。 reduce 在数组上带有一个迭代值的遍历。接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，数组本身。 语法: 用法 最简单的应用就是累加： 自带一个可以初始化的迭代值，所以不需要循环、不需要单独创建变量，所以代码非常简洁。类似的需要一个初始值的遍历，用 reduce 会很简洁，不仅仅是累加这种。 以上的例子基本上都是需要一个初始值，然后迭代返回这个值的套路，reduce 非常适合这种场景。 代码测试 统计班级里面各个年龄的人数：","id":"df7df5c2-0af9-5201-8e5d-6635721528ee","fields":{"title":"😄 reduce 函数","description":"js 中一般很少用（至少之前我很少用到）的一个内置函数，趁着有时间深入了解下。","slug":"/blog/reduce","date":"2019-07-31"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"😄 reduce 函数","date":"2019-07-31 21:09:13","banner":null,"slug":"reduce","categories":["algorithm"],"tags":["功能","技巧"]}}},{"node":{"excerpt":"这个计划其实在几个月之前就已经准备了，但是拖延症严重啊，现在才正式准备来完成这个任务。 00、缘由 工作从来不是轻松的，尤其是前端，技术上大爆炸式的发展更是让人目不暇接...... 更确切的是学不过来了。让人不由得： 从前的时光很慢。慢的，一生只够学一个 JQuery。现在嫌弃时间太慢，视频教程都要 4 倍速。 虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。 所以就想给自己备个课，找条路，定个方向。永远在路上。 0…","id":"32d2b9a3-3ec4-5120-8705-0b75ee1ccbf6","fields":{"title":"🚢 前端进阶之路启程 ","description":"虽然不间断的学习，项目中也会用到接触到新技术，但是仍然觉得自己差的很多，特别的焦虑。可能很多人也会有这个阶段，焦虑，有想法，愿意努力，但是不得要领。","slug":"/blog/one-piece","date":"2019-07-21"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🚢 前端进阶之路启程 ","date":"2019-07-21 11:24:36","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='92'%3e%3cpath%20d='M0%2015l1%2016v1L0%2061c0%2027%200%2029%202%2028l8-1-6%202c-4%202-4%202%2010%202l14-1%201-2c0-2-1-2-9-2-5%200-8%200-7-1v-3l-1-1c1-1%2022-2%2024%200s12%201%2026%200c7-1%207-2%206-4-1-1-1-1-3%201-1%201-2%201-2-2l-2-7c-2-2-2-4%201-5l1-3-1-2-2-1c-2-1-2-1%201-1%205%200%207-3%209-10%201-6%205-9%208-5%200%201%202%202%205%202%205%200%209%202%2014%207%204%204%204%204%202%203-3%200-3%202%200%205%201%202%206%203%205%201-1-1%201-5%202-5l3-2%204-2%204-2%205-3c3-1%204-3%201-2l-1-3%202-3v2l1%202%202%201c2%201%202%201%203-2%202-3%203-2%202%203%200%202%204%204%205%203l4-1%203-1%204-2%206-3c2-1%202-1%200-3h-4l-5-1c-2-1-5-2-6-1l-3-1-3-5-3-4%202-2%203-4%201-2v-3c0-2-1-2-2%202-2%204-2%204-3%202l4-10%204-9H0v15M298%201c0%202%202%209%205%2011%202%203%201%203-2%201s-4-3-5-1l-5-1c-3-2-4-2-5-1-3%204-3%205-4%203%200-2-2-1-6%202-7%204-13%2016-9%2018l1%205c1%204%203%206%203%203h1l5%202c3%200%204%200%204-2h1c2%203%203%202%202%200v-2l1-1v-3h5c-1%201%202%201%206%201l7%201h-15l5%202c5%201%205%201%202%201l-4%202c-1%202-1%204%201%204l2%202h4c0%201%201%202%203%202%202-1%204%200%204%201h3c0-3%203-1%204%201%200%202%200%202%202%201%201-1%201-1%201%201%200%204%203%205%206%202l5-1c5%201%206%202%203%202l-3%201h3c3%200%203%202%200%202-2%201-2%201%200%202l1%201%201%202%202%203c-1%200-5-2-4-3l-1-1c-1%201-5%200-7-3-2-2-3-1-3%202l2%202%201%202%201%201%204%202%203%201h2c0%202%202%201%202-1l1-2c2%200%201%206-1%207l-2%201h2l4%201%203%202%203%201%206%201c5%200%206%200%206-2s0-2%202-1l4%202c2%200%202%200%201%201s-1%201%201%201l3-1h1l1%201%201-2%201-3c1%200%205%203%204%204l-2-1-2-1%201%202%208%202%207%201-1%201c-5-1-23%200-23%201l7%201c7-1%209%200%204%201l-6%202-4%202h9c9%200%2010%200%2010-2l2-3c2-1%202-1%202%202l-1%203h8c7%200%207%200%207-2l-1-3v-1l1-44V0h-51l-51%201M19%2045c-2%202-2%202-3%201-2-3-4-2-4%202%200%202%200%202%205%202%207%201%2011%202%2014%207l4%203v2l1%202v1l1-2h8l4-1c4-1%204-3%200-4l-3-2%202-2c4-3%204-4%201-3l-3-1-1-1-2%201c0%202-2%201-3-1l-1-1-1%202c1%201-1%202-2%200h-1l-1-1-1-1-3-2c-4-4-8-5-11-1'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":4.363636363636363,"src":"/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg","srcSet":"/static/a0a9b6c2d71bc1b167824a17c016c73e/1cd47/banner.jpg 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/0aeec/banner.jpg 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/30bd0/banner.jpg 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/2e512/banner.jpg 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/28df3/banner.jpg 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/654ed/banner.jpg 1920w","srcWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp","srcSetWebp":"/static/a0a9b6c2d71bc1b167824a17c016c73e/5e0c5/banner.webp 180w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/c5804/banner.webp 360w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/f1dd6/banner.webp 720w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/00479/banner.webp 1080w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/aa813/banner.webp 1440w,\n/static/a0a9b6c2d71bc1b167824a17c016c73e/67803/banner.webp 1920w","sizes":"(max-width: 720px) 100vw, 720px"}}},"slug":"one-piece","categories":["think"],"tags":["思考","闲聊"]}}},{"node":{"excerpt":"…","id":"688959f1-bf10-5e29-bbd2-cfdf13c17f30","fields":{"title":"🌞 不要错过外面美妙的阳光~~","description":"写给自己的初心、放下手机，吹吹外面世界真实的风~~","slug":"/blog/to-myself","date":"2019-02-16"},"parent":{"__typename":"File","sourceInstanceName":"blog"},"frontmatter":{"title":"🌞 不要错过外面美妙的阳光~~","date":"2019-02-16 10:17:10","banner":null,"slug":"to-myself","categories":["think"],"tags":["初心","美好"]}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"pagination":{"page":["6505615e-7a9b-518c-b5c4-380c5d6add61","8f37d124-ec81-52a3-85ef-12560d306667","efef442d-0f5c-556e-a942-17e00d70eb08","7a4db9ef-9f76-5854-b2fa-b70aa7635e36","90a5685e-ac35-574c-b3f0-e2405184100e","e2a8341f-425c-576f-bb41-0e8383ee1cc9","5145372e-fd2a-5b70-aa1a-fa32efbc2637","ab0ef5c6-d8c2-5d3a-b4d2-9a7ad1aaf49e","24c013f9-6ca3-5c34-86f6-7c15b7f321b5","6df12020-1eb1-5808-9368-b9e4f65d85d3","0841789b-4d4a-56c2-bf8e-7778bd9770dc","b21210c2-f124-5473-9732-6336302a2ae0","beeddcae-7d80-5cbf-9952-0567f3ee19be","e64b5c46-84ab-5699-bc5b-d5460491e764","0d56e544-58e4-592d-9f5f-8518cdeb0cfc"],"pageNum":2,"nextPagePath":"/blog/3","previousPagePath":"/blog","pageCount":4,"pathPrefix":"/blog"}}}}